专业编程基础技术教程

网站首页 > 基础教程 正文

4、事件处理

ccvgpt 2024-08-28 13:45:22 基础教程 11 ℃

Event

addEventListener:指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。

4、事件处理

type:表示监听事件类型的字符串。

listener:事件处理函数;

event:当为false的时候是事件冒泡,反之则是事件捕获;

注册/移除事件的两种方式

第一种

无法对一个元素注册多个事件;

var btn=document.querySelector('button')

btn.onclick=function(){ // 注册事件

console.log(1)

btn.onclick=null; // 移除事件

}

第二种

有浏览器兼容性的问题;

var btn=document.querySelector('button')

var Evenfunc=function() { // 注册事件

console.log(1)

btn.removeEventListener('click',Evenfunc)

}

btn.addEventListener('click', Evenfunc)

事件委托

将事件委托给父级元素来进行监听,子元素不注册事件;

target:获取正在触发事件的对象;

currentTarget:事件处理函数所属的对象;

type:事件类型;

cleatX:鼠标当前点击的坐标;

cleatY:鼠标当前点击的坐标;

preventDefault:取消默认事件;

stopPropagation:停止冒泡;

keyCode:键盘码;

<body>

<div class="box">

<div class="cls c1"></div>

<div class="cls c2"></div>

<div class="cls c3"></div>

<div class="cls c4"></div>

</div>

</body>

<script type="text/javascript">

var box = document.querySelector('.box')

box.onclick = function(e) {

console.log(e.target)

console.log(e.currentTarget)

e.currentTarget.style.border = 'solid 1px red'

}

</script>

Tags:

最近发表
标签列表