重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

JS事件

JS事件包括如下:

1. 鼠标事件

onclick 点击
onmouseup 鼠标弹起
onmousedown 鼠标按下
onmouseover 鼠标移动到元素上
onmouseout 鼠标离开元素
onmousemove 鼠标在元素上移动

成都创新互联公司长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为余杭企业提供专业的成都网站设计、成都网站制作余杭网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

拖拽事件

obj.onmousedown=function(){
      ……
      document.onmousemove=function(){
            ……
            return false;//清除默认事件(移动文字或图片加载事件)
      }
   }
    document.onmouseup=function(){
        document.onmousemove=null;//清除自定义的鼠标移动事件,避免obj甩不掉。
    }

滚轮事件

1.onmousewheel (Chrome与IE)
DOMMouseScroll (火狐) 只能用事件绑定方式添加
2.wheelDelta 用来判断滚轮滚动的方向

2.键盘事件

onkeydown 键盘按下
onkeyup 键盘弹起
onkeypress 键盘按下并放开

onkeydown与onkeypress的区别:

(1)onkeydowm 指用户按下任何键盘时发生;onkeyup指按下并放开任何字母数字键时发生。onkeydown先于onkeypress发生。
(2)onkeydowm捕获的keyCode不区分大小写,而onkeypress区分。
(3)onkeypress不能识别系统按钮(如箭头键和功能键等)

一些属性:

(1)ev.keyCode;//返回键盘对应字符的ASCII码,但不完全等同。
(2)ev.charCode;
(3)ev.ctrlKey;/ev.shiftKey;/ev.altKey;

3.焦点事件

  • 焦点定义:光标停留的位置,且可以接收用户的输入。
  • 获取焦点方式:(1)点击;(2)tab键;(3)js设置。
  • 事件:
    onfocus 获得焦点;
    onblur 失去焦点;
  • 方法:
    obj.focus();//自动获取焦点。
    obj.blur();//失去焦点。
    obj.select();//选择指定元素obj的内容。

4.event对象

当事件发生时,跟触发的事件对象的所有信息都保存在event对象里面,包括事件类型,鼠标位置,事件函数等。

  • event对象是内置的全局对象,可以直接调用。其是在事件处理函数触发时通过第一个参数传入。如:

    btn.onclick=function(ev){
       console.log(ev);
    }//IE8及以下不兼容。(event对象火狐不兼容!)
    
    //兼容处理:
    btn.onclick=function(ev){
       var ev = ev || event;
       console.log(ev);
    }//当第一个为真时,返回第一个值;如果第一个为假,则判断第二个,若为真,返回第二个值;若两个都为假,则返回undefined。
  • 获取鼠标点击时的位置:

    ev.clientX-------ev.clientY;

5.事件捕获

  • 查看链接

  • 全局捕获(只有IE能使用)

    btn.setCapture();//当一个元素设置了全局捕获以后,这个元素监听所有事件,当有事件发生时就会触发这个元素的处理函数。(只捕获一次)

  • 释放全局捕获

    btn.releaseCapture();

6.事件冒泡

当一个元素接收到事件的时候,会把它接收到的事件依次传播给它的父级,直到顶层window。
………… ---> body ---> document ---> window。
(IE8及以下没有冒泡至window。)

  • 取消事件冒泡:
    ev.cancelBubble=true;//所有浏览器都支持!
    ev.stopPropagation();//IE8及以下不兼容!
    //兼容处理:
    ev.stopPropagation() ? ev.stopPropagation() : ev.cancelBubble=true;
  • 例子:
    window.onload=function(){
            var btn=document.getElementsByTagName("button")[0];
            var oDiv=document.getElementsByTagName("div")[0];
            btn.onclick=function(ev){
                    console.log("按钮点击了");
                    var ev=ev||event;
                    ev.cancelBubble=true;
                    //ev.stopPropagation();
            }
            oDiv.onclick=function(){
                    console.log("div点击了");
                    console.log(event);
            }
            document.body.onclick=function(){
                    console.log("body点击了");
            }
            document.onclick=function(){
                    console.log("document点击了");
            }
            window.onclick=function(){
                    console.log("window点击了");
            }
    }

7.事件绑定

传统的添加事件的方法,如果同时添加两个事件,前面的会被后面的覆盖掉。

事件绑定:可以给同一对象的同一事件添加不同的事件处理函数。

  • IE(除IE11):
    obj.attachEvent(事件名称,处理函数);

    btn.attachEvent("onclick",fun1);
    btn.attachEvent("onclick",fun2);
    //IE9,10:触发时正序的;this指window。
    //IE8及以下:触发时倒序的,即先触发fun2,再触发fan1。this指object。
  • 其他浏览器及IE11(IE8及以下不支持):
    obj.addEventListener(事件名称<不加on>,处理函数,是否捕获)
    btn.addEventListener("click",fun1,true);
    btn.addEventListener("click",fun2);//最后一个参数可不写。
    //触发顺序是正序。this指触发该事件的对象,即button。
  • 兼容处理:
    function bind(obj,ev,fun){
     obj.attachEvent ? obj.attachEvent("on"+ev,fun) : obj.addEventListener(ev,fun);
    }

8.事件取消

  • 传统事件的取消

    oDiv.onclick=function(){
     alert("A");
     oDiv.onclick=null;
    }
  • 绑定事件的取消
    oDiv.removeEventListener("click",fun);//有第三个参数:true/false;
    oDiv.detachEvent("onclick",fun);

9.阻止默认事件

(1) 默认行为:当事件发生时,浏览器会默认做的事情。

(2) 阻止默认行为:当这个事件发生时,在处理函数里使用return false;如:
document.oncontextmenu=function(){return false;}//阻止右击菜单的显示。contextmenu指上下文事件。

(3) IE8及以下不兼容,使用全局捕获(只能IE使用)。

(4) 用事件绑定方式的默认事件清除:

window.onload=function(){
     document.addEventListener("contextmenu",function(ev){
                var ev=ev||event;
//              ev.preventDefault();
                ev.returnValue=false;
        },false);

        document.attachEvent("oncontextmenu",function(){
                var ev=ev||event;
                ev.returnValue=false;
//                return false;
        })
}

当前文章:JS事件
文章来源:http://cqcxhl.com/article/josjch.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP