事件的绑定，属性，监听，传播，传播方向，阻止传播，目标对象，事件委托，默认行为，this关键字

最新推荐文章于 2022-09-22 13:21:06 发布

阿尭

最新推荐文章于 2022-09-22 13:21:06 发布

阅读量200

点赞数 1

文章标签： java servlet html

本文链接：https://blog.csdn.net/qq_63322025/article/details/126627112

版权

事件的绑定方式

DOM0级

1. 事件属性方式

2. 赋值式

DOM2级

3. 事件监听

ele.addEventLisitner(事件类型,functiion(){

})

事件属性；好处：大家都会，几乎所有的浏览器都支持；坏处：夹杂在HTML代码中，代码不简洁；

把事件写在标签的属性里面

<input type="button" οnclick="alertMessage()" value="按钮"/>

事件绑定 :
缺点：只能给一个元素注册一个事件，绑定一个事件，后一个会覆盖前一个，只执行事件二
好处：符合“行为，样式，结构”相分离；便于操作当事对象；方便读取事件对象

divEle.οnclick=function(){

console.log('我是第一事件')}

divEle.οnclick=function(){

console.log('我是第二事件')}

事件监听：事件分离，后者不会覆盖前者

ele.addEventLisitner(事件类型，function（）｛

｝)

// 事件监听写法
        // btn3.addEventListener('click',function(){
        //     alert('事件监听1')
        // })
        // btn3.addEventListener('click',function(){
        //     alert('事件监听2')
        // })

事件对象event；事件目标对象：target当前选中的元素节点；this关键字: 在事件处理函数中this表示事件源

console.log('this ',this)

var target= e.target || e.srcElement

 <script>
        var divEle = document.querySelector('div')
        divEle.addEventListener('click',function(e){
            e = e || window.event  // 事件对象
            var target =  e.target || e.srcElement // 事件目标对象

            console.log('target ',target)
        })
    </script>

事件传播：目标：你是点击在哪个元素身上了，那么这个事件的目标就是什么

1. 嵌套的元素, 事件会传播

2. 事件传播方向问题

+ 事件冒泡

从事件目标对象开始 -> window对象结束

由内向外传播的事件方式称为事件冒泡 (默认传播行为)

+ 事件捕获

由外向内传, window对象 -> 事件目标对象

3. 事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡

阻止事件传播：

e.stopPropagation() 标准浏览器
e.cancelBubble=true IE低版本

阻止事件传播兼容写法：

e.stopPropagation?e.stopPropagation():e.cancelBubble = true

<body>
		<div>
			<h4>
				<p></p>
			</h4>
		</div>

		<script>
			/*
          分别给p元素和div元素绑定click事件, 点击p标签，div会不会触发事件呢?
        */
			var divEle = document.querySelector('div')
			var pEle = document.querySelector('p')
			var h4Ele = document.querySelector('h4')

			divEle.addEventListener('click', function (e) {
				e = e || window.event // 事件对象
				var target = e.target || e.srcElement // 事件目标对象
				console.log('div元素 ', target)
			},false)//事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡

			pEle.addEventListener('click', function (e) {
				console.log('p元素')
			},false)

			h4Ele.addEventListener('click', function (e) {
               e.stopPropagation?e.stopPropagation():e.cancelBubble = true // 阻止事件传播
				console.log('h4元素')
			},false)
		</script>
	</body>

事件委托：

当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作

注：不支持事件冒泡的不能使用如:焦点事件

好处：减少了事件绑定的数量；对后来动态创建的元素依然有效，
解决动态添加的元素节点无法绑定事件的问题;减少事件的冗余绑定，节约了事件资源。

<body>
		<ul>
			<li>张同学</li>
			<li>李同学</li>
			<li>王同学</li>
		</ul>

		<script>
/*
             循环遍历所有同学，绑定收外买这个事情
                自己的事情自己处理，没有使用代理
            */
			function test1() {
				var liEles = document.querySelectorAll('li')
				for (var i = 0; i < liEles.length; i++) {
					liEles[i].addEventListener('click', function () {
						alert(this.innerHTML + '收到外买')
					})
				}
			}
            /**
             *  每个同学收外买的事情，交给ul代理接收
             */
            function test2(){
                var ulEle = document.querySelector('ul')
                ulEle.addEventListener('click',function(e){
                    e = e || window.event  // 事件对象
                    var target = e.target || e.srcElement // 事件目标对象

                    alert(target.innerHTML + '代收到外买成功')
                })
            }
            test2()
</script>

Test2（）使用的是事件委托写法

默认行为：

就是不用我们注册，它自己就存在的事情，比如我们点击鼠标右键的时候，会自动弹出一个菜单，比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面，这些不需要我们注册就能实现的事情，我们叫做默认事件。

阻止默认行为：

e.preventDefault() : 非 IE 使用
e.returnValue = false ：IE 使用

右键的行为：contextmenu