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. django项目 报错：ImportError: cannot import name choice

    今天项目开发中遇到一个错误,排查了很久才发现原因,现在分享出来,希望对大家有所帮助. 错误描述:在项目中添加了一个random.py的类,导入random中的choice,并在randstr方法中使用 ...

  2. 解题（ConflictPhoneNumber--冲突的电话号码）

    题目描述 移动推出的校内网短号和亲情网短号非常方便,但在某款新手机里却出现了尴尬的bug.例如,当通讯录中包含如下号码时:1.小王:6002.小李:4676543.小张:600010输入600时,手机 ...

  3. 使用电脑ODBC测试数据库连接方法

    使用电脑ODBC测试数据库连接方法 一.打开电脑的控制面板——管理工具——数据源(ODBC),在用户dsn页面中点击添加按钮,选择IBM DB2 ODBC DRIVER,点击完成. 二.在弹出的配置页 ...

  4. 配置ESP8266 NONOS SDK时由于工具链版本差异引发的故障

    前几天部署ESP8266_NONOS_SDK时遇到了一个看似奇怪的问题,描述如下: examples例程可以通过编译,但烧写到ESP8266模块后,程序无法正常运行,编译和烧写的相关配置均无误.在bo ...

  5. python之集合及其方法---整理集

    集合的定义: 由不同元素组成.一组无序排列的可hash值.集合中元素必须是不可变类型 集合的定义方式: 由大括号组成: 每个元素用逗号分隔: 元素书写不是key-value形式: 集合是由不同元素组成 ...

  6. vim常用配置 vimrc文件

    自从接触vim,自己瞎鼓捣.vimrc也有一段时间了.收集记录一下好用的配置. 一.奇技淫巧 1.折叠代码 折叠代码常常用在代码块较长的情况下,比如一个文件里定义了很多个函数,或者注释.括号影响的阅读 ...

  7. paloalto防火墙安装内容和软件更新

    1.为了确保您始终不会受到最新威胁(包括尚未发现的威胁)的攻击,您必须确保防火墙始终具有 Palo Alto Networks 发布的最新更新内容及软件. • Antivirus(防病毒)— 包括新的 ...

  8. 【LeetCode刷题系列 - 003题】Longest Substring Without Repeating Characters

    题目: Given a string, find the length of the longest substring without repeating characters. Example 1 ...

  9. 安装mysql后，sql语句中表名区分大小写的问题

    今天安装完mysql后,执行查询语句select * from user,结果报user表不存在,但是实际是存在的,查了一下才知道是因为mysql的my.cnf文件中少了一个大小写敏感的配置,若不配置 ...

  10. C51汇编典型代码&一些org-mode技巧

    C51汇编典型代码&一些org-mode技巧 文档存放 具体内容可见存放的数据. 下面主要介绍关键代码. ASM 部分 1;; LCD数据发送========================= ...