JS 基础事件的用法

        // 1.9以上用on
        // 案例一
        // $(‘#btn‘).on(‘click‘, function(){
        //     //console.log(1);
        //     alert(‘测试...‘);
        // });

        // 案例二
        // $(‘#btn‘).on(‘click mouseover‘, function(){
        //     //console.log(1);
        //     alert(‘测试...‘);
        // });

        // 案例三
        // $(‘#btn‘).on(‘mouseover mouseout‘, function(){

        //     $(‘#div1‘).html(function(index, value){

        //         return value+‘1‘;
        //     });

        // });
        // 案例四
        // $(‘#btn‘).on({
        //     // 键值用引号也可以
        //     mouseover: function(){
        //         alert(‘移入...‘);
        //     },
        //     mouseout: function(){
        //         alert(‘移出...‘);
        //     }
        // });

        // on()与 off()的用法
        // $(‘#btn‘).on(‘click mouseover‘, function(){
        //     alert(‘鼠标移入...‘);
        // });

        // $(‘#btn‘).off(‘mouseover‘);

        //
        // $(‘#btn‘).on(‘click‘, fn1);
        // $(‘#btn‘).on(‘click‘, fn2);

        // $(‘#btn‘).off(‘click‘, fn2);
        // function fn1(){
        //     alert(‘fn1‘);
        // }

        // function fn2(){
        //     alert(‘fn2‘);
        // }

        // $(‘form‘).submit(function(){
        //     alert(‘表单提交了‘);
        // });

        // focus(),  blur()
        // $(‘#txt‘).focus(function(){
        //     alert(‘光标激活状态...‘);
        // }).blur(function(){
        //     alert(‘光标丢失状态...‘);
        // });

        // $(‘#txt‘).mousedown(function(){
        //     alert(‘按下‘);
        // })

        $(‘#btn‘).mouseup(function(){
            alert(‘抬起‘);
        })

        // mousedown 鼠标按下
        // mouseup 鼠标按下弹起
        // mousemove 鼠标拖拽
        // resize 改变浏览器窗口大小时触发
        // scroll 滚动条改变时触发
        // submit 表达提交时触发
        // mouseover/out 会触发子节点
        // mouseenter/leave 不会触发子节点
时间: 2024-10-12 12:52:51

JS 基础事件的用法的相关文章

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的例子(JS敲久了,VB习惯的都不熟悉了,看来得经常回顾了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg

JS基础——事件对象event

事件为什么会是对象呢?先了解一下事件处理 一.事件处理 JS在事件处理函数中提供了事件对象,帮助处理鼠标和键盘事件.同时还可以修改一些事件的捕获和冒泡流的函数. 事件处理分为三部分:对象.事件处理函数=函数 document.onclick=function(){ alert(this.value); //this代表着在该作用域中离它最近的对象. } 以上事件处理中,document为对象,click是事件处理类型,onclick为事件处理函数.function()为匿名函数,用于触发后执行.

js基础——事件绑定(事件监听)

JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 1 <div id="box" onClick="alert('HELLO WORLD')"> 2 <div id="box2" onClick="notice();"></div> 3 <div id="box3" onClick="service('HELLO W

js基础-事件委托

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! <!DOCTYPE html> <html> <head> <title>事件委托</title> </head> <body> <ul id="ul"> <li class="item">11</li> <li class="item">22<

js常用事件及其用法

1.onload 和 onunload 事件 onload事件:指的是页面加载事件. onunload事件:指的是离开页面事件 <!DOCTYPE html> <html> <body onload="test()"> <script> function test() { if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert(&q

js 基础篇(点击事件轮播图的实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

js事件监听器用法实例详解

本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: window.onload = function(){  var btn = document.getElementById("yuanEvent");  btn.onclick = fun

js事件监听器用法实例详解-注册与注销监听封装

本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 window.onload = function(){   var btn = document.getElementById("yuanEv