孔浩javaScript笔记五（事件的蜕变）

最新推荐文章于 2013-04-22 20:41:09 发布

戴维南

最新推荐文章于 2013-04-22 20:41:09 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/yangnuowei88/article/details/8810894

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

这些对比得到函数名是指向一个函数代码段的（前面的java函数内存分析得知）

1.简单的事件处理时，HTML和事件处理混合在一起了！

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">

function clickD(obj) {
  alert(obj.innerHTML);
}
function mouseD(obj) {
  //设置这个对象的颜色，在js中设置文本的样式均通过xx.style.样式名称
  obj.style.color = "#f00";
  //当使用代码来设置样式的时候，如果在css中通过-表示的，都是有驼峰标识，font-size-->fontSize
  obj.style.fontSize = "18px";
}
function outD(obj) {
  obj.style.color = "#000";
  obj.style.fontSize = "16px";
}
</script>
</head>
<body>
<div οnclick="clickD(this)" style="cursor: pointer">点击了试一下</div>
<div οnmοuseοver="mouseD(this)" οnmοuseοut="outD(this)">鼠标移动上来试试</div>
</body>
</html>

你可以看到等于了一个匿名的函数（第一种情况是直接等去函数名+（），--既调用了）

<body>
<ul>
  <li>aaaaaaaaaaaaaa</li>
  <li>bbbbbbbbbbbbbb</li>
  <li>cccccccccccccc</li>
  <li>dddddddddddddd</li>
  <li>eeeeeeeeeeeeee</li>
</ul>
<input type="button" value="点击一下" id="btn"/>
<script type="text/javascript">
  var btn = document.getElementById("btn");
  //可以通过如下方式来绑定事件，这样绑定事件，就可以完成事件和html的解耦合操作
  //在开发中通常都是使用这种方式来绑定事件
  //这个事件的处理函数中默认有一个event的参数，用来获取相应的事件信息
  btn.onclick = function(event) {
   //特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件
   //但是FF却不支持window.event，所以通常使用如下方式解决
   event = event||window.event;
   alert(event.type);
   //this就表示这个按钮对象
   alert(this.value);
  }
</script>
</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
//当窗口加载完毕之后才执行init方法，这样可以省略body中的onload
//所以如果希望使用如下的事件定义方式，需要先完成html信息的加载
window.onload = init;
/**
* 此时init方法是在body的onload之后执行，就等于在所有的页面标签加载完毕之后才执行init,此时节点就存在了
*/
function init() {
  alert("abc");
  var btn = document.getElementById("btn");
  /**
   * 如下绑定方式带来最大的一个问题是如果将该段代码放到head中定义，在执行到绑定事件的时候并没有把html的标签
   * 渲染出来，所以通过DOM得到的节点都是null的，就报错了，解决这个问题的方法是在页面加载完成之后才调用以下这段代码
   * 可以在body中的通过onload事件来处理
   */
  btn.onclick = function(event) {
   //特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件
   //但是FF却不支持window.event，所以通常使用如下方式解决
   event = event||window.event;
   alert(event.type);
   //this就表示这个按钮对象
   alert(this.value);
  }
}
</script>
</head>
<body>
<ul>
  <li>aaaaaaaaaaaaaa</li>
  <li>bbbbbbbbbbbbbb</li>
  <li>cccccccccccccc</li>
  <li>dddddddddddddd</li>
  <li>eeeeeeeeeeeeee</li>
</ul>
<input type="button" value="点击一下" id="btn"/>
</body>
</html>

戴维南

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
孔浩javaScript笔记五（事件的蜕变）

这些对比得到函数名是指向一个函数代码段的（前面的java函数内存分析得知）1.简单的事件处理时，HTML和事件处理混合在一起了！ js01_hello function clickD(obj) { alert(obj.innerHTML); } function mouseD(obj) { //设置这个对象的颜色，在js中设置文本的样式均
复制链接

扫一扫