js event事件

最新推荐文章于 2024-05-12 21:38:39 发布

在线小白www

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量219

点赞数

分类专栏： JavaScript jQuery 文章标签： javascript

原文链接：https://segmentfault.com/a/1190000016106775

版权

JavaScript 同时被 2 个专栏收录

128 篇文章 7 订阅

订阅专栏

jQuery

109 篇文章 3 订阅

订阅专栏

转载：https://segmentfault.com/a/1190000016106775

什么是事件对象？

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他特定事件相关的信息。

比如：

鼠标操作导致的事件对象中，会包含鼠标位置的信息。

键盘操作导致的事件对象中，会包含按下键的有关信息。

下面是点击document时event包含的属性

event对象的兼容写法

event对象不能兼容所有的浏览器，我们一般是采用下面的这种方式进行兼容。

var oEvent = ev || event;

如果参数不是ev而是event的时候，兼容方式也可以写成下面这种格式。

document.onclick=function(event){
    var oEvent = event || window.event;
    console.log(event);
}

测试代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>event兼容测试</title>
    <script>
      window.onload=function(){
        document.onclick=function(ev){
          var oEvent=ev || event;
          console.log(event);
        }
      }
    </script>
  </head>
  <body>
  </body>
</html>

event常用属性

oEvent.type ，获取绑定的事件类型，比如click、mouseover等；
oEvent.target，（在IE低版本中用event.srcElement），返回触发事件的元素。比如[object HTMLInputElement]指的是HTML里的input元素；
oEvent.currentTarget，（IE低版本中不存在）表示当前所绑定事件的元素。跟target的区别看下面代码。

<!DOCTYPE html>
<html>
  <head>
    <title>event.target和event.currentTarget的区别</title>
    <script>
      window.onload=function(){
        document.onclick=function(ev){
          var oEvent=ev || event;
          var oCurrentElement=oEvent.target || oEvent.srcElement;
          console.log(oCurrentElement);
          console.log(oEvent.currentTarget);
          console.log(oEvent.type);
        }
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="事件处理程序">
  </body>
</html>

oEvent.stopPropagation()，（在ie中用oEvent.cancelBubble=false）//用于阻止事件冒泡
oEvent.stopImmediatePropagation()，//当一个元素绑定多个事件处理程序的时候，事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，就不执行后面的事件处理程序了。
oEvent.preventDefault();（在ie低版本中用oEvent.returnValue=true）//阻止事件的默认行为，比如阻止a的href链接。在智能设讲用return false。

<!DOCTYPE html>
<html>
  <head>
    <title>仿select下拉框、阻止默认动作、阻止默认行为</title>
    <style>
      #div1{
        width: 400px;
        height: 300px;
        background: #ccc;
        display: none;
      }
    </style>
    <script>
      window.onload=function(){
        var oBtn=document.getElementById("btn1");
        var oDiv=document.getElementById("div1");
        var oA=document.getElementById("a1");
        oBtn.onclick=function(event){
          oDiv.style.display="block";
          var oEvent=event || window.event;
          if(oEvent.stopPropagation){
            oEvent.stopPropagation();
          }else{
            oEvent.cancelBubble=true;//IE，在新版的chrome中支持
          }
        }
        oA.onclick=function(){
          var oEvent=event || window.event;
          if(oEvent.preventDefault){
            oEvent.preventDefault();
          }else{
            oEvent.returnValue=false;//IE
          }
        }
        document.onclick=function(){
          oDiv.style.display="none";
        }
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="显示">
    <div id="div1"></div>
    <a href="http://www.baidu.com" id="a1">a链接</a>
  </body>
</html>

oEvent.clientX;鼠标的横坐标。
oEvent.clientY;鼠标的纵坐标。

阻止默认事件

普通事件是没有返回值的，在事件中我们可以通过return false来阻止默认事件。下面我们在右键菜单中通过return false阻止弹出右键菜单。
我们在某个动作里用return false告诉浏览器，不用你帮忙了，我们自己处理。比如下面的代码我们在oncontextmenu右键菜单事件里return false告诉浏览器，我不需要默认的菜单了，如果我们需要一个自定义菜单，我们可以return false默认菜单然后自己定义自己的菜单。

<!DOCTYPE html>
<html>
  <head>
    <title>return false取消默认行为，取消右键菜单</title>
    <script>
      window.onload=function(){
        document.oncontextmenu=function(){
          return false;//阻止默认事件
        }
      }
    </script>
  </head>
  <body>
    oncontextmenu环境菜单，上下文菜单
  </body>
</html>

在线小白www

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js event事件

转载：https://segmentfault.com/a/1190000016106775什么是事件对象？在触发DOM上的某个事件时，会产生一个事件对象event。这个对象包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他特定事件相关的信息。比如：鼠标操作导致的事件对象中，会包含鼠标位置的信息。键盘操作导致的事件对象中，会包含按下键的有关信息。下面是点击document时event包含的属性event对象的兼容写法event对象不能兼容所有的浏览器，我.
复制链接

扫一扫