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. thinkphp5 or

    $where['sq']=[ [ 'like' , '%"'.UID.'"%'] , [ 'like' , '%"'.$userinfo['depart_id'].'&q ...

  2. JavaWeb练习-网上名片管理系统

    实验项目名称 JavaWeb网上名片管理系统 实验目的 实现名片的增.删.改.查等操作. 实验基本原理 JSP指令.JSP动作.JSP内置对象等 主要仪器设备及耗材 Win10.Myeclipse 实 ...

  3. 转：Jmeter分布式测试

    在使用Jmeter进行性能测试时,如果并发数比较大(比如最近项目需要支持1000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter提供的分布式测试的功能. 一.Jmeter分 ...

  4. Python基础-函数（六）

    一.函数介绍 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print().但你也可以自己创建函数 ...

  5. laravel的路由分组，中间件，命名空间，子域名，路由前缀

    laravel的路由分组,就是把一些具有相同特征的路由进行分组,比如一些路由需要进行验证,一些路由有共同的前缀,一些路由有相同的控制器命名空间等. 这样把路由组合在一起,方便管理,维护性更好. Rou ...

  6. scrapy 爬取小说

    QiushuSpider # -*- coding: utf-8 -*- import scrapy import time from qiushu.items import QiushuItem c ...

  7. 使用串口安装centos操作系统

    https://linuxconfig.org/how-to-force-text-mode-installation-of-redhat-linux https://www.centos.org/f ...

  8. qt quick-初始学习概念

    Qt Quick简介: Qt Quik 是一种高级用户界面技术,使用它可以轻松地创建供移动和嵌入式设备使用到动态触摸式界面和轻量级应用程序:Qt Quick主要由三部份组成: 改进的Qt Creato ...

  9. [精华][推荐]CAS SSO单点登录服务端客户端学习

    1.通过下载稳定版本的方式下载cas的相关源码包,如下: 直接选择4.2.1的稳定代码即可 2.我们项目中的版本版本使用maven apereo远程库去下载 通过远程maven库下载cas-serve ...

  10. txt 修改

    [61TECH_HEIBAILIUYI]#gaIcldGcyd7ducFc3deaRaOdAd4dPdMdaenc1chaeedeGcfcfeyd1cedhbidIcXcIdBdbdvdfcvbjdr ...