码迷,mamicode.com
首页 > 其他好文 > 详细

事件处理& 事件委托& 区别mouseover与mouseenter

时间:2020-04-14 20:45:33      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:外部   当前时间   http   对象   default   asc   live   app   png   

技术图片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .divBtn {
    position: absolute;
    top: 250px;
  }

</style>

<body style="height: 2000px;">

<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class=‘divBtn‘>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种):
  * eventName(function(){})
    绑定对应事件名的监听,    例如:$(‘#div‘).click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如:$(‘#div‘).on(‘click‘, function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑:
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   需求:
   1. 给.out绑定点击监听(用两种方法绑定)
   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
   3. 点击btn1解除.inner上的所有事件监听
   4. 点击btn2解除.inner上的mouseover事件
   5. 点击btn3得到事件坐标
   6. 点击.inner区域, 外部点击监听不响应
   7. 点击链接, 如果当前时间是偶数不跳转
   */
//1. 给.out绑定点击监听(用两种方法绑定) /*$(‘.out‘).click(function () { console.log(‘click out‘) })*/ $(.out).on(click, function () { console.log(on click out) }) //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定) /* $(‘.inner‘) .mouseenter(function () { // 进入 console.log(‘进入‘) }) .mouseleave(function () { // 离开 console.log(‘离开‘) }) */ /* $(‘.inner‘) .on(‘mouseenter‘, function () { console.log(‘进入2‘) }) .on(‘mouseleave‘, function () { console.log(‘离开2‘) }) */ $(.inner).hover(function () { console.log(进入3) }, function () { console.log(离开3) }) //3. 点击btn1解除.inner上的所有事件监听 $(#btn1).click(function () { $(.inner).off() }) //4. 点击btn2解除.inner上的mouseenter事件 $(#btn2).click(function () { $(.inner).off(mouseenter) }) //5. 点击btn3得到事件坐标 $(#btn3).click(function (event) { // event事件对象 console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角 console.log(event.clientX, event.clientY) // 原点为窗口的左上角 console.log(event.pageX, event.pageY) // 原点为页面的左上角 }) //6. 点击.inner区域, 外部点击监听不响应 $(.inner).click(function (event) { console.log(click inner) //停止事件冒泡 event.stopPropagation() }) //7. 点击链接, 如果当前时间是偶数不跳转 $(#test4).click(function (event) { if(Date.now()%2===0) { event.preventDefault() } }) </script> </body> </html>

 

区别mouseover与mouseenter

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>19_事件切换</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }
    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: olive;
    }
    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: red;
    }
    .div3 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 230px;
        background: olive;
    }
    .div4 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: yellow;
    }

    .divText{
        position: absolute;
        top: 330px;
        left: 10px;
    }

</style>
<body>

<div class="divText">
    区分鼠标的事件
</div>

<div class="div1">
    div1.....
    <div class="div2">div2....</div>
</div>

<div class="div3">
    div3.....
    <div class="div4">div4....</div>
</div>
<!--
区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout * mouseenter: 只在移入当前元素时才触发, 对应mouseleave hover()使用的就是mouseenter()和mouseleave()

区别on(‘eventName‘, fun)与eventName(fun) * on(‘eventName‘, fun): 通用, 但编码麻烦 * eventName(fun): 编码简单, 但有的事件没有对应的方法
--> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> $(.div1) .mouseover(function () { console.log(mouseover 进入) }) .mouseout(function () { console.log(mouseout 离开) }) $(.div3) .mouseenter(function () { console.log(mouseenter 进入) }) .mouseleave(function () { console.log(mouseleave 离开) }) </script> </body> </html>

 

事件委托

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>20_事件委托2</title>
</head>

<body>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>

<!--
1. 事件委托(委派/代理):
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  // 设置事件委托
  $(ul).delegate(li, click, function () {
    // console.log(this)
    this.style.background = red
  })

  $(#btn1).click(function () {
    $(ul).append(<li>新增的li....</li>)
  })

  $(#btn2).click(function () {
    // 移除事件委托
    $(ul).undelegate(click)
  })

</script>
</body>
</html>

 

事件处理& 事件委托& 区别mouseover与mouseenter

标签:外部   当前时间   http   对象   default   asc   live   app   png   

原文地址:https://www.cnblogs.com/afangfang/p/12700652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!