注意点:
draggable="true"
即可实现元素拖拽<div id="box" draggable="true"></div>
<!-- img标签默认的draggable就是true,可以不用设置 -->
<img src="./images/mn.jpg" alt="" >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
}
</style>
</head>
<body>
<!--注意点:一定要给元素加上draggable=true,拖拽事件才能生效-->
<div id="box" draggable="true"></div>
<script>
var box = document.getElementById('box');
//1.拖拽开始
box.ondragstart = function () {
console.log('鼠标按下并第一次移动,开始拖拽');
};
//鼠标按下:求出蓝线距离 = 红线 - 绿线
var x = 0;
var y = 0;
box.onmousedown = function (e) {
x = e.pageX - box.offsetLeft;
y = e.pageY - box.offsetTop;
}
//2.正在拖拽
box.ondrag = function (e) {
console.log(e.pageX, e.pageY);
console.log('拖拽中');
};
//3.拖拽结束
box.ondragend = function (e) {
console.log('鼠标松开,拖拽结束');
box.style.left = e.pageX - x + "px";
box.style.top = e.pageY - y + "px";
}
</script>
</body>
</html>
跟容器相关的拖拽事件
* 注意点:这个事件默认不会触发,需要配合ondragover使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
}
.container{
width: 400px;
height: 550px;
border: 1px solid #000;
position: absolute;
right:20px;
top:20px;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="container"></div>
<script>
//找到box
var box = document.querySelector('.box');
//找container
var container = document.querySelector('.container');
//1.ondragenter
container.ondragenter = function(){
console.log('有元素被拖拽进来了');
};
//2.ondragleave
container.ondragleave = function(){
console.log('元素离开了');
};
//3.ondragover
//由于这个事件触发非常的频繁,影响性能。所以需要阻止默认事件
container.ondragover = function(e){
e.preventDefault();
// console.log('鼠标移动时,元素在我的范围内');
};
//4.ondrop
//这个事件默认不会触发,需要配合ondragover使用
// 给容器盒子注册ondragover事件,然后阻止这个事件的默认行为 e.preventDefault()
container.ondrop = function(){
console.log('鼠标松开时,元素还在我的范围内');
};
</script>
</body>
</html>
1.键盘事件
onkeydown:键盘按下触发
onkeyup:键盘弹起触发
onkeypress:键盘按下并弹起会触发
onkeydown和onkeypress的区别:了解即可
* 通过事件对象获取 语法: 事件对象.keyCode
* 获取到的是键盘对应字符的ascii码
* ascii码转字符:String.fromCharCode(code)
3.有三个属性都可以获取到按下的键
keyCode(IE8及之前),charCode,which
所以为了保证一定能获取到,就做兼容
var code = e.keyCode || e.charCode || e.which;
如何给一个元素添加多个相同事件?
var btn = document.getElementById ( "btn" )
//用这样的方式添加相同的事件,后面的会覆盖前面的
btn.onclick = function () {
alert("点一次200块");
}
btn.onclick = function () {
alert("点我干啥?");
}
addEventListener绑定多个同名事件
//语法:对象.addEventListener(参数1,参数2,参数3);
//参数1:事件名(字符串),不要加on 例如:click 、 mouseover 、mouseout
//参数2:事件处理程序(函数名),当事件触发后哪个函数来处理
//参数3:是一个bool类型,可以不传,默认为fasle(代表冒泡)跟冒泡和捕获有关
//如果有同名事件不会覆盖,而是会依次执行
//IE8及以前的版本不支持
btn.addEventListener ( "click", function ( e ) {
e = e || window.event
alert ( "嘿嘿嘿" )
console.log ( e )
}, false )
btn.addEventListener ( "click", function () {
alert ( "哈哈哈" )
} )
//如果传入已经存在的函数,那么直接写函数名,千万不要写小括号
btn.addEventListener ( "click", sayHi, false )
function sayHi ( e ) {
e = e || window.event
alert ( "你来追我呀!" )
console.log ( e )
}
removeEventListener移除事件
//1.on+事件名称的方式
// btn.onclick = function () {
// alert("哈哈");
// btn.onclick = null; //移除事件。
// }
//2.元素名.addEventListener注册的事件,移除方式
//元素名.removeEventListener(参数1,参数2,参数3);
//参数1:事件名称
//参数2:事件处理程序
//参数3:布尔类型的值
function test() {
alert("哈哈");
}
btn.addEventListener("click", test,false);
btn.removeEventListener("click",test,false)
事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 300px;
height: 300px;
background-color: hotpink;
position: relative;
}
#son{
width: 100px;
height: 100px;
position: absolute;
left: 350px;
top: 350px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点我" id="btn"/>
<div id="son"></div>
</div>
</body>
</html>
<script>
window.onclick = function () {
alert("window被点击了");
}
document.onclick = function () {
alert("文档被点击了");
}
document.documentElement.onclick = function () {
alert("html被点击了");
}
document.body.onclick = function () {
alert("body被点击了");
}
document.getElementById("box").onclick = function () {
alert("我是骚粉的大盒子");
};
document.getElementById("btn").onclick = function () {
alert("我是小按钮");
};
document.getElementById("son").onclick = function () {
alert("我是又黄又绿的小盒子");
};
</script>
如何阻止事件冒泡?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 300px;
height: 300px;
background-color: hotpink;
position: relative;
}
#son{
width: 100px;
height: 100px;
position: absolute;
left: 350px;
top: 350px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点我" id="btn"/>
<div id="son"></div>
</div>
</body>
</html>
<script>
window.onclick = function () {
alert("window被点击了");
}
document.onclick = function () {
alert("文档被点击了");
}
document.documentElement.onclick = function () {
alert("html被点击了");
}
document.body.onclick = function () {
alert("body被点击了");
}
document.getElementById("box").onclick = function (e) {
e = e || window.event;
alert("我是骚粉的大盒子");
// e.stopPropagation();
//e.cancelBubble = true;//IE8及之前
stopPropagation(e);//兼容性封装函数
//阻止事件冒泡的这行代码可以写在这个事件函数的任意位置,一般习惯写在最后面
};
document.getElementById("btn").onclick = function () {
alert("我是小按钮");
};
document.getElementById("son").onclick = function () {
alert("我是又黄又绿的小盒子");
};
/** 阻止事件冒泡兼容性封装
* @param e:事件对象
* @return 无
*/
function stopPropagation( e) {
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
</script>
这里就省略代码了
<div class="one" id="box">
<input type="button" value="按钮" id="btn"/>
<div class="son" id="son"></div>
</div>
<script>
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var son = document.getElementById("son");
document.addEventListener("click",function (e) {
alert("document"+ e.eventPhase);
},true) ;//true表示事件捕获,所以是阶段1,并且优先执行
document.body.addEventListener("click", function (e) {
alert("哈哈,我是body"+ e.eventPhase);
},false);
box.addEventListener("click",function (e) {
alert("哈哈哈,我是粉色的盒子box..."+ e.eventPhase);
},false);
btn.addEventListener("click",function (e) {
alert("哈哈哈,我是按钮btn..."+ e.eventPhase);
},false);
son.addEventListener("click",function (e) {
alert("嘻嘻嘻,我是绿色的盒子son"+ e.eventPhase);
},false);
</script>
<input type="button" value="按钮" id="btn"/>
<script>
var btn = document.getElementById('btn');
btn.onclick = f1;
btn.onmouseover = f1;
function f1(e){
//如果是点击触发的,那么就是click,如果是鼠标移入触发的就是mouseover
console.log(e.type);
}
</script>
事件冒泡好处:如果想给父元素的多个子元素添加事件,我们可以只需要给父元素添加事件即可,然后
通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件
<ul id="ul1">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
var ul = document.getElementById("ul1");
//1.如果想给ul中的每一个li标签添加点击事件,以前的做法需要遍历ul的li标签逐个添加
// for (var i = 0; i < ul.children.length; i++) {
//
// ul.children[i].onclick = function () {
//
// alert(this.innerHTML);
// }
// }
//2.使用时间冒泡:只需要给父元素添加点击事件即可
ul.onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target.innerHTML);
//target:事件源:触发本次事件的源头
alert(e.target.innerHTML);
}
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。