js事件

Y945
596 阅读3分钟

js事件类型

JS类型事件：

   UI事件  鼠标事件  键盘事件...

UI事件

当用户在页面上的元素进行交互时触发

(1)load
当页面完全加载后再window上面触发
我们想要在页面完全加载完之后做出什么操作就可以这样：

window.onload = function(){ 
        console.log('页面加载完毕');
        }

(2)unload
当页面完全写卸载后在window上触发，与load事件正好相对应。只要用户从一个页面切换到另一个页面，就会触发unload事件。 而我们利用这个事件最多的办法是清除引用，以避免内存泄漏。

鼠标事件:

当用户通过鼠标在页面上执行操作时触发

QQ图片20210925090914.png

/*点击事件*/
<button id="btn">点击</button>    /*html代码*/

   <script>
       /*双击的时候触发*/
        btn.ondblclick = function(){
            alert("双击事件")
        }
        /*单击或者回车触发*/
        btn.onclick = function(){
           alert('单击事件');
        }
        /*按下鼠标的时候触发*/
        btn.onmousedown = function(){
           alert('按下事件');
        }
        /*释放鼠标按钮是触发*/
        btn.onmouseup = function(){
            alert('释放事件');
        }
    </script>

事件触发的顺序是这样的：

  • 按下事件
  • 释放事件
  • 单机事件
  • 双击事件
/* 移入移出的事件*/
         <div id="div"></div>
         <script>
          /* 当鼠标在元素内部的时候触发*/
        div.onmousemove = function(){
           alert('mousemove事件触发');
        }
        /*在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。 */
        div.onmouseout = function(){
            alert('mouseout事件触发');
        }
        /*在鼠标指针位于一个元素外部，然后用户首次移入另一个元素边界内时触发*/
        div.onmouseover = function(){
            alert('mouseover事件触发');
        }
    </script>

当我们把鼠标移入到div内部的时候，会触发mouseover事件，当我们从元素内部移出的时候，会触发mouseout事件。
但只要我们在div内部移动鼠标，就会触发mousemove事件。

键盘事件：

当用户通过键盘在页面上执行操作时触发

(1) keydown：当用户按下键盘的任意键时触发
(2) keypress：当用户按下键盘上的字符键时触发
(3) keyup：当用户释放键盘的键时触发

Js事件和jQuery事件绑定联系与区别

关于加载DOM

JS：

 js中常使用window.onload方法
 
 加载机制：在页面所有元素（包括图片，引用文件）加载完后执行。
 
 编写个数： 不可以同时写多个，后面的将会覆盖前面的
                 
 简写：  没有简写

JQuery:

jquery常使用$(document).ready()

加载机制：页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完.
如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function);等价于window.onload()

编写个数：可以同时写多个

简写：$(function(){})  或者 $().ready(function(){})  )  或者$(window).load(function(){})

关于事件绑定

js事件绑定方式：

  • 在DOM元素中直接绑定
  • 在JavaScript代码中绑定
  • 绑定事件监听函数

在DOM元素中直接绑定

这里的DOM元素，可以理解为HTML标签

命名规则：事件处理程序属性的名字由"on"加上事件名组成，并且属性名区分大小写，所有都是小写，即使事件类型是由多个词组,onclick,onchange,onload.onmouseover,

     <!-- 原生代码 -->
   <input onclick="alert('hello')" type="button" value="点击我，弹出弹框" />

     /*自定义函数*/
   <input onclick="myAlert()" type="button" value="点击我，弹出弹框" />
        <script type="text/javascript">
             function myAlert(){
            alert("hello");
            }
       </script>

缺点：每个事件目标对于某种事件类型最多只有一个事件处理程序


window.οnlοad=function(){ alert("one";}

window.οnlοad=function(){alrt("two");}

/*只有two弹窗可以*/

/*想要两个都实现*/

window.οnlοad=function(){
function(){....}

function(){...}

在JavaScript代码中绑定

在JavaScript代码中（即在 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

  /* 语法：*/
elementObject.onXXX=function(){\
    // 事件处理代码\
    
    elementObject 为DOM对象，即DOM元素。
    onXXX 为事件名称。  
}

  /* 为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：*/
  
<input id="demo" type="button" value="点击我，显示 type 属性" />
       <script>
         document.getElementById("demo").onclick=function(){
           alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素， 
         }
        </script>

/*注释*/
getAttribute（）方法 ： 通过元素节点的属性名称获取属性的值。

绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法： elementObject.addEventListener(eventName,handle,useCapture);

参数说明
elementObjectDOM对象（即DOM元素）。
eventName事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle事件句柄函数，即用来处理事件的函数。
useCaptureBoolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数说明
elementObjectDOM对象（即DOM元素）。
eventName事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle事件句柄函数，即用来处理事件的函数。
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

  function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
  obj.addEventListener(type,handle,false);
  }catch(e){
  try{ // IE8.0及其以下版本
  obj.attachEvent('on' + type,handle);
  }catch(e){ // 早期浏览器
  obj['on' + type] = handle;
  }
  }
  }
  
  /*这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。*/

    为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：
    
      addEvent(document.getElementById("demo"),"click",myAlert);
       function myAlert(){
        alert("又是一个警告框");
     }

JQuery的绑定事件

bind()  、 on()  (两者其实类似）

  • bind() bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。

2、bind（event，data，function） 参数说明
event事件 ：是必需要写的。规定添加到元素的一个或多个事件。由空格分隔多个事件。而且必须是有效的事件。
data数据 可选 ：作为event.data属性值传递给事件对象的额外数据对象
function 必需 ：规定当事件发生时运行的函数。

/*示例*/
<script  src="/jquery/jquery.js"></script>
<script >
$(document).ready(function(){
  $("button").bind("click",function(){
    $("div").slideToggle();
  });
});
</script>
  • on（） on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

on（event，childSelector，data,function） 参数说明 event必需： 规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。 规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

/*案例*/
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    alert("The paragraph was clicked.");
  });
});
</script>

事件对象

在触发DOM上的某个事件时候，会产生一个事件事件对象event。

evevt的属性

属性说明
timeStamp返回事件生成的日期和时间
bubbles返回布尔值，指示事件是否是气泡事件类型
button返回当事件被触发时，哪个鼠标按钮点击
pageX光标相对于该网页的水平位置（ie无）
pageY光标相对于该网页的垂直位置（ie无）
screenX光标相对于该屏幕的水平位置
screenY光标相对于该屏幕的垂直位置
target该事件被传送的对象
type事件的类型
clientX光标相对于该网页的水平位置（当前区域可见）
clientY光标相对于该网页的垂直位置

事件对象方法

方法描述
stopPropagation()阻止冒泡
preventDefault()阻止默认事件（默认行为），例如：a标签的跳转

分享暂时先到这里，有错误之处欢迎指出，非常感谢！！

avatar
文章
阅读
粉丝