精华内容
下载资源
问答
  • Jquery对象事件绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/jquery-3.3.1.min.js"></...

    Jquery对象事件绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件绑定</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    
        <script>
            // 给b1按钮添加单击事件
    window.onload=function () {
        /*下面这种写法是错误的*/
     /*   $("#b1").click(){
            alert("点击过来");
        }*/
     /*需要在click里面写我们的fun*/
      /*  $("#b1").click(function () {
            alert("点击过来");
        })*/
    }
    $(function () {
        /*页面加载完成后执行里面的内容*/
        $("#div1").css("backgroundColor","pink");
        $("#b1").click(function () {
            alert("点击过快");
        })
    })
          //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
    function f1() {
        $("#div1").html("div1我的值改变了")
    }
    
    function f2() {
        $("#div2").html("div2获取到了")
    }
    window.onload=f1;
    window.onload=f2;
    $(function () {
        f1();
    })
            $(function () {
                f2();
            })
    
        </script>
    
    </head>
    <body>
    
        <div id="div1">div1....</div>
        <div id="div2">div2....</div>
        <input type="button" value="点我" id="b1">
    <!--    总结-->
    <!--1.window.onload事件只能调用一次,多次调用,后面的会覆盖前面的
    2.$(function(){
    })可以多次调用
    -->
    
    
    
    </body>
    </html>

     

    展开全文
  • 事件绑定 事件对象 事件绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- <button ...

    目录

    1. 事件绑定
    2. 事件对象

     

    1. 事件绑定


      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      	</head>
      	<body>
      		<!-- <button onclick="alert('我被点了')">你点我啊</button> -->
      		
      		<!-- this就表示的是被点击的单签标签本身 -->
      		<p onclick="node_click(this)">小桥流水人家 古道西风瘦马。</p>
      		
      		<a href="http://www.baidu.com">百度一下</a>
      	
      		<script>
      			function node_click(tag){
      				tag.style.border = "solid 2px blue"
      			}
      			
      			// 纯JS的
      			var a_node = document.querySelector("a")
      			// 为期绑定事件
      			a_node.onclick = function(){
      				// 组织跳转的操作  就是在对应的时间函数中 返回值false
      				// 默认是true 所以一点击就跳转了
      				
      				return confirm("确认跳转吗????")
      			}
      		</script>
      	</body>
      </html>
      

       

    2. 事件对象


      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      	</head>
      	<body>
      		<button class="btn">按钮</button>
      		
      		<script>
      			/**
      			 * 触发一个事件 执行该事件对应的行为时
      			 * 会像事件对应的功能中传递一个实参 --- 事件对象
      			 */
      			
      			// 普通的功能
      			// function show(){
      			// 	console.log(arguments.length) // 0
      			// }
      			// show()
      			
      			
      			// var btn = document.querySelector(".btn")
      			
      			// // 绑定事件
      			// btn.onclick = function(e){
      			// 	console.log(arguments.length) // 1
      			// 	// 表示传递进来了实参 这个实参就是事件对象
      				
      			// 	console.log(e)
      			// }
      			
      			// // 键盘时间
      			// document.onkeydown = function(e){
      			// 	console.log(e)
      			// }
      			
      			
      			// 鼠标事件中 事件对象常用的属性
      			document.onmousedown = function(e){
      				/**
      				 * button   0   --- 左键
      				 * 			1 ---- 滚轮
      				 * 			2 --- 右键
      				 */
      				console.log("鼠标的哪个按键被点击了?" + e.button)
      				
      				// 鼠标的位置相对于浏览器边缘的间隙
      				console.log("鼠标距离浏览器文档区(客户区)边缘的间隙:(" + 
      					e.clientX + "," + e.clientY + ")")
      				
      				// 鼠标的位置相对于屏幕边缘的间隙
      				console.log("鼠标距离屏幕边缘的间隙:(" + 
      					e.screenX + "," + e.screenY + ")")
      			}
      			
      		</script>
      	</body>
      </html>
      

       

    展开全文
  • 一、事件绑定 1.给一个对象绑定一个事件处理函数的第一种形式 function fn1(){ alert(1); } function fn2(){ alert(2); } document.onclick=fn1; document.onclick=fn2;//会覆盖前面绑定的fn1 2....

    一、事件绑定

    1.给一个对象绑定一个事件处理函数的第一种形式

    function fn1(){
    	alert(1);
    }
    function fn2(){
    	alert(2);
    }
    document.οnclick=fn1;
    document.οnclick=fn2;//会覆盖前面绑定的fn1
    

    2.给一个对象绑定一个事件处理函数的第二种形式

    ie:obj.attachEvent(事件名称,事件函数);
       (1)没有捕获
       (2)事件名称有on
       (3)事件函数执行的顺序:标准ie->正序 非标准ie->倒序
       (4)this指向window 解决方法call
     标准:obj.addEventListener(事件名称,事件函数,是否捕获);
       (1)有捕获
       (2)事件名称没有on
       (3)事件执行的顺序是正序
       (4)this指向触发该事件的对象

    function fn1(){
    	alert(this);
    }
    function fn2(){
    	alert(2);
    }
    
    document.attachEvent('onclick',function(){
    	fn1.call(document);
    });
    document.attachEvent('onclick',fn2);
    
    //是否捕获:默认是false false:冒泡   true:捕获
    //document.addEventListener('click',fn1,false);
    //document.addEventListener('click',fn2,false);
    

    3.call方法 

    //call 函数下的一个方法 
    //call方法的第一个参数可以改变函数执行过程中的内部this的指向
    //calll方法第二个参数开始就是原来函数的参数列表
    function fn3(a,b){
    	alert(this);
    	alert(a+b);
    }
    //fn3.call(1,10,20);//调用函数 fn3()==fn3.call()
    fn3.call(null,10,20);
    

    4.事件监听封装函数

    function fn1(){
    	alert(this);
    }
    function fn2(){
    	alert(2);
    }
    
    
    //封装函数
    function bind(obj,evname,fn){
    	if (obj.addEventListener) {
    		obj.addEventListener(evname,fn,false);
    	} else{
    		obj.attachEvent('on'+evname,function(){
    			fn.call(obj);
    		});
    	}
    }
    bind(document,'click',fn1);
    bind(document,'click',fn2);
    

    二、事件取消

    1.一般事件取消

    function fn1(){
    	alert(1);
    }
    function fn2(){
    	alert(2);
    }
    
    //普通的取消事件
    document.οnclick=fn1;
    document.οnclick=null; //取消事件
    

    2.取消绑定事件

    function fn1(){
    	alert(1);
    }
    function fn2(){
    	alert(2);
    }
    //取消绑定的事件
    /*
     * ie:obj.detachEvent(事件名称,事件函数);
     * 标准:obj.removeEventListener(事件名称,事件函数,是否捕获);
     */
    //只弹出2
    /*document.attachEvent('onclick',fn1);
    document.attachEvent('onclick',fn2);
    //取消绑定事件
    document.detachEvent('onclick',fn1);*/
    
    
    document.addEventListener('click',fn1,false);
    document.addEventListener('click',fn1,true);
    document.addEventListener('click',fn2,false);
    //只取消了false的fn1事件,而进去的事件true没取消,还是会弹出1
    document.removeEventListener('click',fn1,false);
    

      

     

     

      

    转载于:https://www.cnblogs.com/yangxue72/p/8126998.html

    展开全文
  • 1.事件绑定 jquery事件的简单操作: $().事件类型(function事件处理); $().事件类型(); 1.1 jquery事件绑定 事件绑定后可以很方便地取消绑定。 $().bind(事件类型,function事件处理); $().bind(类型1 类型2 类型3,...

    1.事件绑定
    jquery事件的简单操作:
    $().事件类型(function事件处理);
    $().事件类型();
    1.1 jquery事件绑定
    事件绑定后可以很方便地取消绑定。
    $().bind(事件类型,function事件处理);
    $().bind(类型1 类型2 类型3,事件处理); //给许多不同类型的事件绑定同一个处理
    //不同事件使用”一个”空格分隔
    $().bind(json对象); //同时绑定多个不同类型的事件
    (事件类型:click mouseover mouseout focus blur 等等)
    事件处理:有名函数、匿名函数
    简单事件绑定:
    在这里插入图片描述
    给同一对象的多个不同类型事件绑定同一个处理:
    在这里插入图片描述
    json对象批量绑定事件:
    在这里插入图片描述
    1.2 取消事件绑定
    之前取消事件:
    dvnode.onclick = null; //dom1级事件取消
    dvnode.removeEventListener(类型,(有名)处理,事件流); //dom2级事件取消
    jquery方式取消事件绑定:
    ① $().unbind(); //取消全部事件(无视事件类型、无视处理函数类型)
    ② $().unbind(事件类型); //取消指定类型的全部事件(无视处理函数类型)
    ③ $().unbind(事件类型,有名(事件)处理函数); //取消指定类型事件的指定处理
    注意:第③种取消事件绑定,事件处理必须是有名函数。

    给div绑定多个事件:
    在这里插入图片描述
    在这里插入图片描述
    2. 事件对象、阻止浏览器默认动作、阻止事件冒泡
    $().bind(‘click’,function(evt){ });
    $().click(function(evt){});
    $().bind(‘mouseover’,f1);
    function f1(evt){}
    事件对象:就使用以上的evt即可,在jquery框架内部有做浏览器兼容处理。
    以上evt对主流的事件对象 和 IE的事件对象有封装。
    以上jquery事件的具体操作是对javascript底层代码的封装,具体:
    dvnode.onclick = function(evt){}
    dvnode.addEventListener(类型,funciton(evt){})
    dvnode.attachEvent(类型,function(){window.event})
    Jquery的evt是对javascript evt/event的封装

    阻止浏览器默认动作、阻止事件冒泡:
    dom2级浏览器默认动作阻止:
    事件对象.preventDefault(); 主流浏览器
    事件对象.returnValue = false; IE浏览器
    dom2级事件冒泡阻止:
    事件对象.stopPropagation(); 主流浏览器
    事件对象.cancelBubule = true; IE浏览器
    在jquery里边:

    $().bind(‘click’,function(evt){
    	evt.preventDefault();
    	evt.stopPropagation();
    });
    

    preventDefault()方法是jquery的方法,名字与js底层代码的名字一致而已。
    并且其有做浏览器兼容处理
    stopPropagation()方法是jquery的方法,名字与js底层代码的名字一致。
    其有做浏览器兼容处理

    展开全文
  • Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <...
  • 对象绑定事件

    2020-02-22 17:38:56
    js给对象绑定事件 1.什么是事件? 一个事件由什么组成: 1.事件源 :即 谁来触发事件 2.事件类型 :即 触发什么事件 3.事件处理函数 :即 触发之后做什么 var oDiv = document.getElementById("div1"); oDiv....
  • 1、在标准的事件绑定中绑定事件的方法函数:addEventListener,而IE使用的是attachEvent(只有IE能识别此方法); 解决IE8兼容问题 方法一: try{ dom.addEventListener("click",function(){ alert('ok'); }) }...
  • 文章目录一、DOM的概念二、DHTML与HTML DOM三、Document对象获取元素方法四、Element对象与属性相关...对象1、常见的几类事件点击事件焦点事件加载事件鼠标事件键盘事件选中和改变事件表单事件2、绑定事件的几种方法...
  • JS创建对象事件绑定

    千次阅读 2020-06-30 17:09:11
    JS对象 1、对象的创建 1.使用原始的方式创建对象 var obj = new Object(); obj.name = "zhangsan"; //为obj对象添加属性 obj.age = 20; obj.say = function(){ //添加功能(函数/方法) console.log(this.name,...
  • 1.获取自定义属性 var testEle = document.getElementById("test")  testEle.setAttribute("key","value"); // 设置  ...testEle.attributes["key...2.event的触发事件对象绑定事件对象 event.target返回触发事
  • 事件绑定addEvenetListener不会被覆盖,并且可以捕获事件的触发阶段,也能使用removeEventListener来取消事件绑定,但是不兼容低版本浏览器 在IE中事件绑定和取消使用的是attachEvent与detachEvent,并且事件中的...
  • 事件是浏览器赋予元素的默认行为,也可以理解为事件是天生具备的,不论我们是否为其绑定方法,当某些行为触发的时候,相关的时间都会被触发执行。 浏览器赋予元素的事件行为: 鼠标事件: click 点击事件(PC端:...
  • js给对象绑定事件

    2020-02-23 18:43:26
    js给对象绑定事件 1、要学习js给对象绑定事件,首先我们得了解什么是事件? 一个事件事件源 ,事件类型 , 事件处理函数 组成,其中: 事件源——谁来触发事件 事件类型——触发什么事件 事件处理函数——触发...
  • 1. 注册事件(绑定事件) 1.1 注册事件概述 给元素添加事件,称为注册事件或者绑定事件。 注册事件有两种方式:传统方式和方法监听方式 1. 传统注册方式 利用on开头的事件,如onclick <button onclick = “alert...
  • Vue动态事件绑定

    千次阅读 2019-10-14 20:54:33
    class与style事件绑定有三种:分别为(1)对象(2)数组(3)...class 对象事件绑定如何来使用的呢 看如下代码 .isi{ height: 100px; width: 100px; background: red; } 写了一个样式用来绑定 下面看data data:{ ...
  • 1.事件绑定 1.React事件绑定语法与DOM事件语法相似; 2.语法:on+事件名称=事件处理函数,比如onClick = function(){}; 3.React事件使用驼峰命名法; 4.类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数...
  • [code="java"] function (objs) { if (objs.attr('name') == 'head') { ...传入一个 jquery对象给objs后 可以输出这个对象的html 却不能绑定后面的click事件了 什么原因?其他任何地方都没有消除 或绑定事件
  • 事件绑定

    2016-04-07 17:08:00
    所谓的事件绑定就是为某个对象的某个事件绑定相应的事件处理程序,我们把这个过程就称之为"事件绑定"。 2、事件绑定的三种形式 ① 行内绑定 ② 动态绑定 ③ 事件监听 3、行内绑定 基本语法:<标签 属性列表...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,338
精华内容 3,335
关键字:

对象事件绑定