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('事件名',[参数列表])

<script type="text/javascript">
    $(function () {
        $("#btn").bind('myClick',function (ev,a,b,c) {
            alert("已触发自定义事件")
        });
        $("#btn").trigger('myClick',[1,2,3]);
    })
</script>

View Code

事件代理

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

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

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

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

<script type="text/javascript">
    $(function () {
        $("ul").on('click','li',function () {
            alert("xxxx");
        })
    })
</script>

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">dsgfsaffsfs</textarea>
</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