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. 解决SpringMVC拦截器中Request数据只能读取一次的问题

    解决SpringMVC拦截器中Request数据只能读取一次的问题 开发项目中,经常会直接在request中取数据,如Json数据,也经常用到@RequestBody注解,也可以直接通过request ...

  2. PhoenixFD插件流体模拟——UI布局【Foam】详解

    流体泡沫 本文主要讲解Foam折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Foam 主要内容 Overview 综述 ...

  3. SwipeBackLayout 右滑退出Activity

    不推荐通过添加依赖的方式来导入类库,因为本人导入后出现没法解决的问题. 这里推荐自己导入第三方库类,地址如下: https://github.com/yangzhilong00/MEvolution/ ...

  4. 移动端与web端的测试点的差别

    单纯从功能测试的层面上来讲的话,APP 测试.web 测试 在流程和功能测试上是没有区别的.根据两者载体不一样,则区别如下:系统结构方面web项目,b/s架构,基于浏览器的:web测试只要更新了服务器 ...

  5. 虚拟网络学习笔记之一：VXLAN

    1. 什么是虚拟网络? 答:从架构角度考虑,我们可以采用与服务器虚拟化引入Hypervisor的方式一样,引入Nypervisor或者叫“虚拟网络管理平台”实现虚拟网络.虚拟网络必须像虚拟机一样,脱离 ...

  6. stm32-arduino-f103

    希望给工作中偶尔要用的一些辅助板卡(例如运行信息现场记录)找一个快速开发的手段,Arduino作为流行的开源嵌入硬件框架,组件丰富,资料众多,所以想以Arduino作为平台.但是Arduino板子基本 ...

  7. 2018.09.29 Lua

    转自:https://zybuluo.com/lisaisacat/note/636399  谢谢 Lua 基础简明教程 脚本开发   目录 Lua 基础简明教程 目录 注释 Lua 编程 语句块 赋 ...

  8. Windows Server 2012 配置远程桌面帐户允许多用户同时登录

    网上找了很多关于设置远程桌面最大连接数的文章,大都是说先要到控制面板的管理工具中设置远程桌面会话主机等,大体和我之前的文章<设置WINDOWS SERVER 2008修改远程桌面连接数>里 ...

  9. java的基本数据类型和引用类型

    一.基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节,取值范围-128~127,默认值0 short:短整型,在内存中占16位,即2个字节,取值范围-32768 ...

  10. Git push 提交代码到远程global user.name错误解决办法

    问题:安装了Git-1.9.4-preview和TortoiseGit等工具后,Git服务器开通了账号和密码并配置了邮箱.克隆了服务器代码到本地,按需求进行代码开发.提交本地代码到服务器时出现错误.具 ...