jQuery事件

编辑本博客

事件流

JavaScript DOM事件流:

  • 事件捕获阶段,jq无此阶段
  • 处于目标阶段
  • 事件冒泡阶段

jQuery阻止冒泡

ev.stopPropagation()阻止ev对象事件冒泡

ev.preventDefault()阻止默认事件

return false;组织冒泡与默认事件

  • ev.type事件类型
  • ev.target事件对象
  • ev.pageX鼠标x方向位置
  • ev.pageY鼠标y方向位置

事件绑定

动态生成的元素,不能直接添加事件,里面的事件也不会发生

obj.bind('click',function(){}),第一个参数为时间类型,第二个参数为回调函数。通过空格可以添加多个事件类型。也可以通过key:value方式来添加多个类型与对应事件

移除事件:obj.unbind('click'),如果没有参数,表示移除所有事件。

绑定自定义事件

触发自定义事件

obj.trigger('事件名',[参数列表])

View Code

事件代理

自己完成不了的事件,交给父级元素来做这事件

即给后来添加的元素添加事件

绑定多个选择器,中间用逗号

父级.on('事件名','点击的标签元即选择器','回调函数')

View Code

鼠标事件

单击

双击

按下/弹起

移动

移入

移出

获取焦点

失去焦点

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery鼠标事件title>
    <script src="js/jquery-3.3.1.js">script>
    <style type="text/css">
        *{
       
            padding: 0;
            margin: 0;
        }
        #box{
       
            width: 200px;
            height: 200px;
            background-color: green;
        }
        #child{
       
            width: 100px;
            height: 100px;
            background-color: #A9A9A9;
        }
    style>
head>
<body>
    <div id="box">
        <div id="child">div>
    div>
    <input type="text">
    <input type="password">
body>
<script type="text/javascript">
    $(document).ready(function () {
        
        //双击事件
         $("#box").dblclick(function () {
            alert("dblclick");
         });
        //鼠标按下与弹起触发
        $("#box").mousedown(function () {
            console.log("mousedown");
        });
        $("#box").mouseup(function () {
            console.log("mouseup");
        });
        //鼠标移入和移除,鼠标指针穿过/离开被选元素或被选元素的子元素都将触发动作
        $("#box").mouseover(function () {
            console.log("mouseover")
        });
        $("#box").mouseout(function () {
            console.log("mouseout")
        });

        //只有被选元素移入/移除才触发
        $("#box").mouseenter(function () {
            console.log("mouseenter")
        });
        $("#box").mouseleave(function () {
            console.log("mouseleave")
        });

        //鼠标移动时触发动作
        $("#box").mousemove(function () {
            console.log("mousemove")
        });

        //鼠标获取或失去焦点触发事件,可模拟change()事件
        $("input[type=text]").focus(function () {
            console.log($(this).val())
        })
        $("input[type=text]").blur(function () {
            console.log($(this).val())
        })
        
        //键盘按下或弹起事件触发,可做搜索框,类似百度搜索出现候选词条
        //按下是输入之前的值
        $("input[type=password]").keydown(function () {
            console.log($(this).val())
        });
        $("input[type=password]").keyup(function () {
            console.log($(this).val())
        })
    })
script>
html>
View Code

表单事件

  • change()事件,仅用于input元素,textarea,select等
  • select()方法,用于input元素类型为type的情况,textarea标签等文本标签,select指用鼠标选中内容
  • submit()事件,用于form表单中类型为submit的触发
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单事件title>
    <script src="js/jquery-3.3.1.js">script>
head>
<body>
    <form action="http://www.baidu.com">
        <select name="sweets" id="" multiple="">
            <option value="">巧克力option>
            <option value="" selected="selected">糖果option>
            <option value="">焦糖option>
            <option value="">烧饼option>
            <option value="" selected="selected">饼干option>
        select>
        <input type="text" value="hello" id="target">
        <input type="submit" value="123">
    form>
    <div class="show">div>
    <textarea id="other">dsgfsaffsfstextarea>
body>
<script type="text/javascript">
    $(function () {
        //change事件
        $('select').change(function () {
            $(".show").text($('select option:selected').text());
        })
        //select仅限于用于input type=text和textarea上
        $("#other").select(function () {
            console.log($(this).text());
        })
        $("form").submit(function (ev) {
            //阻止默认行为
            ev.preventDefault();
            //下面做希望做的事儿
            alert(111)
        })

    })
script>
html>
View Code

 

转载于:https://www.cnblogs.com/yaya625202/p/9204347.html

你可能感兴趣的:(javascript)