<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
//1. 传统方式注册事件
divs[0].onclick = function () {
alert(11);
//1. 传统方式删除事件
divs[0].onclick = null;
}
//2. addEventListener方式注册事件(ie9之后)
divs[1].addEventListener('click', fn);
function fn() {
alert(22);
//2. removeEventListener删除事件
divs[1].removeEventListener('click', fn);
}
//3. attachEvent方式注册事件(ie9之前,谷歌现在不支持)
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
//3. detachEvent删除事件
div[2].detachEvent('onclick', fn1);
}
</script>
</body>
三、DOM事件流
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
var son = document.querySelector('.son');
//捕获阶段(document->html->body->father->son) 第三个参数为true
//冒泡阶段(son->father->body->html->document) 第三个参数为false(不写默认值)
son.addEventListener('click', function () {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, true);
</script>
</body>
1.开发中一般使用冒泡阶段,就是addEventListener第三个参数为默认值false时,onclick 和 attachEvent只能得到冒泡阶段
2.有些事件是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave
四、事件对象(重要)
事件对象event
<script>
var div = document.querySelector('div');
//1. event(或者写作e、evt) 就是一个事件对象 当形参来看
//2. 事件对象只有有事件(onclick)才存在 它是系统自动创建的
//3. event包含了和事件相关的数据集合 例如鼠标坐标等等
//4. 事件对象也存在兼容性问题 ie678 要用window.event来获取
div.onclick = function (event) {
console.log(event);
}
</script>
e.target和this的区别:
e.target:返回触发事件的对象(点击了哪个元素,就返回哪个元素)
this:返回绑定事件的对象(哪个元素绑定的事件,就返回哪个元素)
例如:可能ul>li 给ul绑定了onclick事件,因此this是ul,但是点击时可能点了li,此时e.target为li,通过冒泡阶段,ul的点击事件也能触发
阻止默认行为:让链接不跳转 让提交按钮不提交
- e.preventDefault(); dom标准写法 ie9以上
- e.returnValue; 低版本浏览器 ie678
- return false; 没有兼容性问题,仅限于div.onclick = function(e){}的传统注册方式,return false后面的代码不执行
阻止事件冒泡(重要)
- e.stopPropagation(); //ie9以上
- window.event.cancelBubble = true; //ie678
五、事件委托(代理、委派)
面试常问:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
alert('1');
//e.target 可以获取点击对象
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
六、常用的鼠标事件
案例:跟随鼠标的天使:
img采用绝对定位
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-e2E8goc1-1714145785702)]