1.JS事件的基本知识

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js事件基本知识</title>

    <script type="text/javascript" src="js/jQuery.js"></script>

    <script type="text/javascript">

        //这个事件可以添加到第一个button标签上,因为第一个button标签知道fn1是什么.

        function fn1() {

            alert("fn1");

        }

        //这段代码不会被执行,因为页面是从上往下执行,在这里获取不到"#i1".

        //如果想要解决这个问题,可以将下面的这些代码放到body后面.

        var obj = document.getElementById("i1");

        obj.onclick = function () {

            alert("fn2");

            //不能直接给对象添加已有事件,必须在将已有的事件添加到DOM对象的新的方法中.

            fn1();

        }

    </script>

</head>

<body>

<input type="button" class="dd" value="点击我" onclick="fn1();">

<input type="button" class="dd" id="i1" value="点击我">

</body>

</html>

JS事件的学习和JS方法的学习揉杂在一起,JS相对于Java等语言,方法定义和使用上比较随意和简单,但是还是有一些区别,需要理清楚.

2.jQuery方式绑定事件

//jQuery方式绑定事件

$(function () {

    var obj = $(".dd");

    obj.click(function () {

        alert("jQuery方式");

    })

})

这里多多赘述一点,由于jQuery可以理解为是对JS的一种高级封装,这种封装是单向的,所以我们可以在JS中加入jQuery代码块,但是不能将JS和jQuery完全地揉杂在一起,所以对于jQuery的块状代码必须放入到一个分离的jQuery块中.

对于jQuery的绑定事件的方法,这里只举例click()方法,其他的方法查阅jQuery的文档即可.

3.事件操作和委派

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件操作和委派</title>

    <script type="text/javascript" src="js/jQuery.js"></script>

    <script type="text/javascript">

        $(function () {

            //间接绑定:bind.

            //间接绑定,普通情况下,这种绑定方式是多余的.

            //给一个或多个事件绑定函数.

            $("input").bind("click", function () {

                alert("bind间接绑定事件");

            });

            //委派绑定:live

            $(".dd").live("click", function () {

                alert("live委派绑定事件");

            });

            //我在这里新添加一个标签

            //对于这种用JS新添加的标签,间接绑定的事件对这种标签没有用处.

            //对于这种用JS新添加的标签,委派绑定的事件会给符合条件的标签添加事件.

            $("body").append("<input type='button' class='dd' value='我是方法生成的标签,点击我''>");

        })

    </script>>

</head>

<body>

<input type="button" class="dd" value="点击我">

</body>

</html>

不论是bind绑定还是live绑定,都是间接绑定

4.事件切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件的切换</title>

    <style>

        .hover {

            background: aqua;

        }

    </style>

    <script type="text/javascript" src="js/jQuery.js"></script>

    <script type="text/javascript">

        $(function () {

            //需求:鼠标覆盖变色,鼠标移走恢复

            $("#d1").hover(

                //鼠标覆盖

                function () {

                    $("#d1").addClass("hover");

                },

                //注意上面有一个逗号

                //鼠标移走

                function () {

                    $("#d1").removeClass("hover");

                }

            );

        })

    </script>

</head>

<body>

<div style="border:1px solid black; width: 100px; height: 100px" id="d1">

    Hello hover!

</div>

</body>

</html>

在jQuery开发文档中,hover()函数归类到了事件切换中,对于hover()函数的事件切换的定义,仅限于鼠标的覆盖和移走两个操作,上面是一个标准的事件切换代码.

jQuery事件学习的更多相关文章

  1. jquery事件学习笔记（转载）

    一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...

  2. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  3. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  4. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  5. 4月12日学习笔记——jQuery事件

    下面是在 jQuery 中最常使用的 bind()方法举例:$("#testDiv4").bind("click", showMsg); 我们为 id 是 te ...

  6. jquery基础学习之事件篇（三）

    一.鼠标事件 click 单击 与 dbclick 双击 用于监听用户的点击操作,在同一元素上同时绑定 click 和 dblclick 事件是不可取的...根据浏览器支持不同一个点击事件是由mous ...

  7. 【总结整理】JQuery基础学习---事件篇

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  8. jquery 深入学习笔记之中的一个 （事件绑定）

    [jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...

  9. jQuery事件与事件对象

    事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象. 事件与事件对象 首先,我们来看一下经常使用的添加事件的方式: <input type="button" ...

随机推荐

  1. el-input的color修改无效问题

    相信很多前端初学者跟我一样也遇到过el-input的color修改无效问题 如下图:我想把el-input里面的文字改成蓝色,但是使用总是失败 修改方法:打开调试界面,找到el-input对应的sty ...

  2. 深入理解C++11

    [深入理解C++11] 1.很多 现实 的 编译器 都 支持 C99 标准 中的__ func__ 预定 义 标识符 功能, 其 基本 功能 就是 返回 所在 函数 的 名字. 编译器 会 隐式 地 ...

  3. Jupyter Notebook 快捷键使用指南

    因为使用Jupyter Notebook用鼠标选择菜单影响效率,遂将快捷命令记录于此 转自:http://blog.konghy.cn/2017/05/04/jupyter-notebook-hotk ...

  4. jmeter-用户定义的变量

    添加-配置元件-用户定义的变量 请求中出现变量值的位置,用${_tbip}替换 脚本执行完成,在查看结果树中debug sampler中可以看见变量名和变量值

  5. java后端学习记录2019

    学习计划 2019年计划 1.学习计算机基础,并加以实践.包括LeetCode刷题.数据库原理(索引和锁.Sql优化等).网络协议(Http.Tcp).操作系统(加深Linux).<Http权威 ...

  6. Linux debug

    proc文件系统中可以查看一些正在运行的变量如device-tree sh-3.2# cat /proc/device-tree/ #address-cells fixedregulator@9/ # ...

  7. unity 傅老师学习

    辅助插件 I tweeen anmition 补充valueto       https://www.bilibili.com/read/cv103358 开关门 iTween event脚本  iT ...

  8. 深入理解HashMap和CurrentHashMap

    原文链接:https://segmentfault.com/a/1190000015726870 前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇 ...

  9. python-常见用法

    一.注释 单行注释:#后全部注释 多行注释:'''所有内容'''  或者使用 """所有内容"""  ,多行注释用三对单引号或双引号包裹 二 ...

  10. Python用HTMLTestRunner生成html测试报告

    小编的主机:mac 一.引入HTMLTestRunner包 1.下载HTMLTestRunner.py,已上传到网盘,点击下载 2.将HTMLTestRunner.py复制到python安装目录的Li ...