[JavaScript知识库]【jquery事件】

鼠标事件

on

<p>on点击事件</p>
 <form action="./index.html">
        <input type="text" name="" id="">
        <input type="submit" value="提交">
    </form>

 //单击段落时会显示该段落文本
    $('p').on('click', function () {
        alert($(this).text());
    })
    
 //将数据传递给事件处理程序，该事件处理程序在此按名称指定  
    function myHander(event) {
        // console.log(event);
        alert(event.data.foo);
    }
    $('p').on("click", {foo: "bar"},myHander);

 // 取消表单提交操作，并通过false防止事件冒泡
    $('form').on('submit',false);

 // 取消默认操作 会阻止表单提交
    $('form').on('submit',function(event){
        event.preventDefault();
    });
    
// 停止冒泡事件，而不会阻止表单提交
    $('form').on('submit',function(event){
        event.stopPropagation();
    });

off

从所有段落中删除所有事件处理程序

<p>我是 p 标签</p>
<script>
    $(function () {
        //添加点击事件
        $("p").on("click",function (){
            alert("点击事件 1");
        });
        $("p").on("click",function (){
            alert("点击事件 2");
        });

        //移除全部事件
        $("p").off();
    });
</script>

one

当所有段落被第一次点击的时候，显示所有其文本

<p>我是 p 标签</p>
<script>
    $(function () {
        $("p").one("click",function () {
            alert($(this).text());
        });
    });
</script>

blur

<input type="text" value="=文本框失去焦点">
<script>
    $(function () {
        //input失去焦点
        $("input").blur(function () {
            alert($(this).val());
        });
    })
</script>

change

<input type="text" value="change事件">
<input type="text" value="改变change事件">
<script>
    $(function () {
        //给所有的文本框增加输入验证
        $("input[type='text']").change(function () {
            console.log($(this).val());
        });
    })
</script>

click

<p>我是 p 标签</p>
<script>
    $(function () {
        //触发页面内所有段落的点击事件
        $("p").click(function () {
            alert($(this).html());
        });
    })
</script>

mouseover

	<style>
        div{width: 200px;height: 200px;background-color: blueviolet;}
    </style>
    <div>
        <p style="width: 80px;height: 80px;background-color: burlywood;"></p>
    </div>

 /* 鼠标指针移过时 */
 /* 进入div触发，不出去不触发 */
 $('div').mouseover(function(){
   console.log('mouseover鼠标指针移过时');
 })
 /* 鼠标指针移出时 */
 $('div').mouseout(function(){
   console.log('mouseout鼠标指针移出时');
 })

dblclick

<p>我是 p 标签</p>
<script>
    $(function () {
        //触发页面内所有段落的双击事件
        $("p").dblclick(function () {
            alert($(this).html());
        });
    })
</script>

mouseout

/* 鼠标指针进入时 */
$('div').mouseenter(function(){
    console.log('mouseenter鼠标指针进入时');
 })
  /* 鼠标指针离开时 */
  $('div').mouseleave(function(){
     console.log('mouseleave鼠标指针离开时');
 })

区别:
mouseover 进入子元素的时候也触发
mouseenter 进入子元素的时候不触发
mouseout 进入子元素的时候也触发
mouseleave 进入子元素的时候不触发

hover

hover是由mouseenter和mouseleave组成的

   /* hover是由mouseenter和mouseleave组成的  */
       $('div').hover(function(){
           console.log('鼠标进去了')
       },function(){
           console.log('鼠标出来了')
       })