欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript从零基础到精通——事件

程序员文章站 2024-03-16 13:17:10
...

事件

事件是给浏览器定义一个预处理函数,当事件触发的时候,执行函数,这就是事件。

理解事件:
在一个程序中,我们决定做了用户做了事情之后该做什么
事件的原理和hover类似。可以做到:hover做不到的事,:hover只能操作当前的元素,但是事件绑定之后可以选择任何元素。

事件触发三要素:

通过谁触发? 通过什么触发?触发后要做什么?

事件的写法:

w3c标准:事件写在行内,但是因为结构和行为要分离,所以我们一般情况下用JavaScript的方法来绑定事件,只有再极少数情况下,才将事件写在行内。

事件的绑定方法:

浏览器中的节点(对象).on+事件句柄 = function( ){

     要干什么?(放在浏览器中,不执行,当事件发生的时候再执行。)
     
}

例如:

oDiv.onclick=function(){     
     alert(1}

事件对象

当事件被触发的时候会得到一个信息(事件对象),包含了跟事件相关的一些属性和方法的封装(如:事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等),只有事件在触发的时候才会得到。

JS“缺德”定律:事件对象有兼容问题;

兼容写法:

e=e || window.event;

鼠标事件类型

    onclick
        单击
        
    ondblclick
        双击
        
    oncontextmenu
        鼠标右键(上下文菜单)
        
    onmousedown
        鼠标按下
        
    onmouseup
        鼠标抬起
        
    onmouseover
        鼠标移入
        
    onmouseout
        鼠标移出
        
    onmouseenter
        鼠标移入,但是他不会在穿过子元素的时候出发
        
    onmouseleave
        鼠标移出,但是他不会在穿过子元素的时候出发
        
    onmousemove
        鼠标移动

鼠标事件及方法

Javascript从零基础到精通——事件

    e.buttons
        返回鼠标点击按键(1左键,2右键,4中键滚轮)
        
    e.offsetX / offsetY         距离点击最小的元素边缘的坐标
        获取事件触发最近的盒子(事件源)的坐标
        
    e.clientX / clientY         无论点box的哪个位置,都是固定算到浏览器可视区边缘,不计算滚动部分
        获取可视区的坐标(根据浏览器的定位)
        
    e.screenX / screenY         无论浏览器是多大,都是获取到整个屏幕边缘的坐标
        获取整个屏幕的坐标
        
    e.pageX / e.pageY           如果没有滚动条或者滚动条在最顶部,那么这组值和client是一样的/有滚动条他是计算包含滚动部分的总值
        获取文档的坐标(包含滚动条)
        
    client和page这两对用的最多

键盘事件类型

    keydown
        键盘按下
        
    keyup
        键盘抬起
        
    keypress
        键盘敲击
        
    特殊键码:是否按下alt  ctrl  和 shift
    e.altKey
    e.ctrlKey
    e.shiftKey
    
    // 获取键盘键码的兼容写法
    var code = e.keyCode || e.which

表单事件类型

    在单选,多选,下拉菜单给这些元素绑事件一般用change
    
    获取选中的值的时候并不需要取获取option, 直接获取当前select的value属性即可, text取到的是字符串
        当option没有value属性的时候获取的就是innerHTML
        当option里面有value属性的时候获取到的就是选中option的value值
        
    onfocus
        获取焦点
        
    onblur
        失去焦点
        
    onsubmit
        表单提交

鼠标滚轮事件

    scroll
        没有滚动条的时候是不会触发的
        
    mousewheel(火狐不兼容)
    DOMMouseScroll(兼容火狐)
        没有滚动条的时候也会触发

事件默认行为

只有有默认行为的事件才需要写这个, 不同的事件里阻止的是不同的行为
    比如说a标签,点击后有跳转动作;
    form表单中的submit类型的input有一个默认提交跳转事件;
    reset类型的input有重置表单行为。

阻止默认事件:

	// , 这种写法要放在函数末尾来阻止默认行为
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            return false;
        }

事件流

    子元素的事件被触发时, 父级也会被触发(冒泡)
    
    一个完整事件流包含: 捕获阶段 --> 目标阶段 --> 冒泡阶段
        IE浏览器不认识捕获
        
    冒泡是可以阻止的: 阻止事件从当前元素往外传播
        e.stopPropagation();
        e.cancelBubble=true;    //兼容IE

阻止冒泡事件的兼容写法:

    if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }

事件监听

DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;

DOM2级事件处理是所有DOM节点中的方法,可以重复监听,但是浏览器兼容存在问题;
    //DOM0级
    oDiv.onclick = function(){}
    //DOM2级
    function fn(){}
    if(window.attachEvent){
        // IE
        oDiv.attachEvent("onclick", function(){});  // IE只有冒泡阶段,所以没有第三个参数,而且需要加on;
    }else{
        // 普通浏览器
        // 这里的fn不用加括号, 因为fn不是要直接调用, 而是将来事件触发了才会被事件去调用
        oDiv.addEventListener( "click", fn,false);  // false指冒泡阶段
    }
    //移除事件监听,第二个参数为必须,移除的事件处理函数
    oDiv.removeEventListener( "click",fn)
    oDiv.detachEvent("onclick",fn)

事件委托(事件处理)委派

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以处理某一类型的所有事件
使用场景主要用于事件源不确定的情况,可以把事件委托给父级

判断事件源:

e.target || e.srcElement
相关标签: js javascript dom