浅析js绑定事件的常用方法


Posted in Javascript onMay 15, 2016

浅析js绑定事件的常用方法 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
/**
 * 绑定事件的方式:用事件属性绑定事件函数
 * 优点:1:完成行为的分离 
 * 2:便于操作当事对象,因为function是作为on***的属性出现的,可直接用this引用当事对象。
 * 3:方便读取事件对象,事件触发时系统自动把事件对象传递给事件函数,已其一个来传
 */	
  window.onload=function(){
  	 var k=document.getElementById('k').onclick=function(event){
	 var jj=document.getElementById('jj');
	   jj.style.top=event.clientX+'px';
		 jj.style.left=event.clientY+'px';
	 }
  } 
  
</script>
<style>
	#k{width:60px;height:80px; background-color:#80ffff;}
	#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>	
</body>
</html>

以上这篇浅析js绑定事件的常用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
selenium+python实现自动登录脚本
2018/04/22 Python
Python如何操作docker redis过程解析
2020/08/10 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
小学雷锋月活动总结
2014/07/03 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
公司人事任命通知
2015/04/20 职场文书
小学班级口号大全
2015/12/25 职场文书