事件

最新推荐文章于 2023-03-04 10:55:11 发布

gercke

最新推荐文章于 2023-03-04 10:55:11 发布

阅读量91

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gercke/article/details/102864482

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件

一、如何绑定事件处理函数

1.ele.onxxx = function(){}

兼容性很好，但是一个元素同一事件只能出现一次
基本等同于写在HTML行间上
程序this指向dom元素本身

//eg: 
div.onclick = function (){
   console.log('a');
}

1 <div style="width: 100px; height:100px; =“console.log(‘a’)”>

2.obj.addEventListener(type, fn, false);

(事件类型，处理函数，false)
IE9一下不兼容，可以为一个事件绑定多个处理程序，但是同一个函数不能多次引用
程序this指向dom元素本身

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
    console.log('a');          
},false)

3.obj.attachEvent(‘on’ + 事件类型, 处理函数)

IE独有，一个事件同样可以绑定多个处理程序
程序this指向window

绑定事件出现在循环中，考虑是不是会形成闭包，可以考虑使用立即执行函数更改

//点击第几个a，会弹出相应的序号
<body>
<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
<script>
    var lin = document.getElementsByTagName('li');
    var len = lin.length;
    for (var i = 0; i < len; i ++){
        (function (i) {
            lin[i].addEventListener('click',function () {
                console.log(i);
            },false);
        }(i))
    }
</script>
</body>

二、解除事件处理程序

ele.onclick = false / null / ’ ’
ele.removeEventLinstener(type, fn,false) //和你写的要对应
ele.detschEvent(‘on’ + type, fn);
若绑定匿名函数，则无法解除

    <script>
        var div = document.getElementsByTagName('div')[0];
        div.onclick = function (){
            console.log('a');
            this.onclick = null;//执行一次解除绑定
        }
    </script>

    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',test, false);
        function test(){
            console.log('a');
        }
        div.removeEventListener('click', test, false);//解除绑定，不能再执行
    </script>

三、事件处理模型

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，自子元素冒泡向父元素（自底向上）
事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，自父元素捕获至子元素（自顶向下）（将前面事件中的false 改成 true）
IE没有事件捕获
触发顺序：先捕获，在自身事件执行，再冒泡
focus , blur , change , submit , reset , select 等事件不能冒泡

取消冒泡

W3C标准：event.stopPropagation(); 不支持IE9以下
IE独有：event.cancelBubble = true;

阻止默认事件

默认事件：表单提交，a标签跳转，右键菜单

return false; 以对象属性的方式注册的事件才生效
event.preventDefault(); W3C标准
event.returnValue = false;

document.oncontextmenu = function(e){//右键出现菜单默认事件
    console.log('a');
   // return false;
   event.preventDefault();
}

事件对象

event || window.event 用于IE
事件源对象

event.target (火狐只有这个)
event.srcElement (IE只有这个)

事件委托

利用事件冒泡，和事件源对象进行处理
优点：

性能不需要循环所有的元素一个一个绑定事件
灵活当有新的子元素时不需要重新绑定事件

    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
    <script>
      var ul = document.getElementsByTagName('ul')[0];
      ul.onclick = function (e){
          var event = e || window.event;//事件源对象
          var target = event.target || event.srcElement;
          console.log(target.innerText);
      }
    </script>

拖拽问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68aDLXdt-1572612672443)(./1561453533511.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v1chrYEf-1572612672447)(./1561453590775.png)]
在这里插入图片描述

事件分类

一、鼠标事件

click(3) = mousedown(1) + mouseup(2) 、contextmenu、mouseover、 mouseout、 mouseenter 、mouseleave
判断点击的是鼠标的那个键

用button 来区分鼠标的按键，button返回是0，则是左键；返回值是1，则是滚轮；返回值是2，则是右键
DOM3标准规定：click事件只能监听左键，不能监听右键，只能通过onmousedown ,onmuseup方法

二、键盘事件

keydown > keypress > keyup
keydown 和 keypress 的区别

keydown 可以响应任意键盘按键；
keypress只可以响应字符类按键，且返回其ASCLL码，可以转化成相应字符

document.onkeypress = function (e){
  console.log(String.fromCharCode(e.charCode));
 }

三、文本操作事件

input ,focus, blur, change

var input = document.getElementsByTagName('input')[0];
input.oninput = function (e){ //也可以改为change
             console.log(this.value);
     }

<input type="text" value="请输入用户名" onfocus="if(this.value =='请输入用户名') {this.value=''}" onblur="if(this.value==''){this.value='请输入用户名'}">

四、窗口操作事件

onscroll ：元素在滚动式触发
onload ：整个页面加载完执行