一、 事件 event对象 下
1.1 Event对象的概念
什么是事件对象
当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息
通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明,浏览器会自动分配一个参数,这个参数其实就是 event 对象
直接接收 event 对象,是 W3C 的做法,IE 不支持,IE 自己定义了一个 event 对象,直接在 window.event 获取即可。
input.onclick = function (evt) {
var event = evt || window.event; //实现跨浏览器兼容获取 event 对象
alert(event );
};
其他写法: var event = evt ? evt: window.event;
keyCode 获取用户按下键盘的哪个按键,对应一个数字,IE8以下不支持which
code = event.keyCode || event.which
其他属性 ctrlKey、shiftKey、altKey ,包含在event中
回车 提交 ctrl+回车 提交
if(code == 13 && event.ctrlKey) {
//发送消息
}
1.2 事件委托
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
例子说明,我们为ul添加新的li,其中对li标签元素绑定了click事件,但是发现,后增加的元素没有办法触发我们的click事件。
<button id="btnAdd">添加</button>
<ul id="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var btnAdd = document.getElementById('btnAdd');
var ulList = document.getElementById('ulList');
var list = document.getElementsByTagName('li');
var num = 3;
btnAdd.onclick = function () {
num++;
var li = document.createElement('li');
li.innerHTML = num;
ulList.appendChild(li)
}
for (i = 0; i < list.length; i++) {
list[i].onclick = function(){
alert(this.innerHTML);
}
}
</script>
这是因为如果事件涉及到更新HTML节点或者添加HTML节点时,新添加的节点无法绑定事件,更新的节点也是无法绑定事件,表现的行为是无法触发事件。
其中一种解决方法是,添加子节点的时候,再次为其添加监听事件
<button id="btnAdd">添加</button>
<ul id="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var btnAdd = document.getElementById('btnAdd');
var ulList = document.getElementById('ulList');
var list = document.getElementsByTagName('li');
var num = 3;
function doclick() {
for (i = 0; i < list.length; i++) {
list[i].onclick = function () {
alert(this.innerHTML);
}
}
}
doclick();
btnAdd.onclick = function () {
num++;
var li = document.createElement('li');
li.innerHTML = num;
ulList.appendChild(li);
doclick();
}
</script>
这也是问题所在:
1.首先我们多次操作DOM获取元素,这样势必会降低浏览器处理性能
2.事件不具有继承性,如果我们动态在页面中添加了一个元素,那么还需要重新走一遍上述程序为其添加监听事件
那么有没有更好的方法呢?根据事件的冒泡原理,我们还可以实现另外一个很重要的功能:事件委托。
我们只监听最外层的元素,然后在事件函数中根据事件来源进行不同的事件处理。这样,我们添加事件监听时只需要操作一个元素,极大的降低了DOM访问,并且不用再给新增的元素添加监听事件了,因为元素的事件会冒泡到最外层,被我们截获。
<button id="btnAdd">添加</button>
<ul id="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var btnAdd = document.getElementById('btnAdd');
var ulList = document.getElementById('ulList');
var num = 3;
ulList.onclick = function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.innerHTML);
}
}
btnAdd.onclick = function () {
num++;
var li = document.createElement('li');
li.innerHTML = num;
ulList.appendChild(li);
}
</script>
结语
这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的,所以要判断点击的对象到底是不是li标签元素。
Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较(习惯问题)。
这样,我们就实现了我们的事件委托,当然,不是所有的事件都是可以委托的。
适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。
当用事件委托的时候,根本就不需要去遍历元素的子节点,只需要给父级元素添加事件就好了,新增加的节点也可以触发事件效果。
总结
以上就是今天带你走进从零认识JavaScript到精髓(十九)JavaScript的事件event对象(下)
会持续更新中…
原创不易,期待您的点赞关注与转发评论😜😜