浅谈js事件

一:js事件分为四大类:先说说常用的一些属性

1.键盘事件:
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 键盘按下
2.鼠标事件:
注意:out和over会在鼠标从父级移入子级的时候触发,而enter和leave只有在移入和移出子级整体的时候触发
onmoveover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标移入
onmouseleave 鼠标移出
onmousedown 鼠标按下
onmouseup 鼠标抬起
ondblclick 鼠标双击
oncontextmenu 鼠标右键
3.表单事件:
onsubmit 表单提交:点击的是提交按钮,form表单触发onsubmit
onreset 表单重置
onfocus 获取焦点
__注意:一些事件中,系统会有默认事件触发,比如右键的时候会弹出来菜单,比如按了提交按钮跳转网页。这些都是默认事件。默认事件可以被阻止

return false;

4.移动端事件
ontouchstart 相当于鼠标按下onmousedown
ontouchmove 相当于鼠标移动onmousemove
ontouchend 等价于 鼠标抬起onmouseup

二:事件对象

以keydown为例
注意:keydown支持特殊按键,如:command shift 但不区分大小写 A 和 a 的keyCode都是65; keypress不支持特殊按键,keyCode区分大小写

document.onkeydown = function(ev){
        // 获取事件对象可以使用window.event,注意:在火狐或取不到    
        // 在火狐需要通过参数获取
        // 兼容写法
        var evObj = window.event || ev;
        console.log(evObj.keyCode);
        // 如何判断是否按了组合键
        if(evObj.keyCode == 67 && evObj.metaKey){
                console.log("按了command + c");
            }
}

1.evObj.keyCode 每个按键对应一个数字编码
2.evObj.target 触发了事件的元素,触发事件的元素不一定是绑定事件的元素
3.evObj.offsetX/Y 鼠标距离自身的距离
4.evObj.clientX/Y 鼠标距离屏幕的距离
5.evObj.pageX/Y 鼠标距离页面的距离

三:事件绑定

第一种就是上面例子代码,但第一种不能绑定多个事件;而下面的这种可以绑定多个事件。
1.非IE绑定事件的方法
格式: 元素.addEventListener("不包含on的事件名",时间对应的函数,是否在铺获阶段触发false这或者true);

    redDiv.addEventListener("click",function(){
        console.log("2");
     },false);

2.IE绑定事件的方法

    redDiv.attachEvent("click",function(){
        console.log("2");
     },false);

3.兼容写法

**** 参数:
****    element:代表要绑定的事件
****    type:要绑定的事件名(不含on)
****    fn:要绑定的事件对应的函数
function addEvent(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,fn);
        }else{
            element["on" + type]= fn;
        }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,628评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,295评论 0 6
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 973评论 0 9
  • 作为学生,好好念书,算是最稳妥最中规中矩的一条路了。如果你能力够强、目标明确,那你尽可以去做你喜欢的事。但如果你目...
    午后y阅读 231评论 0 0