同样的功能,不同的书写格式。

1.个人觉得比较繁琐的写法,但是比较常见,特别是在大项目的时候常用的就是这种方法:

<div id="mouse" onmouseover="mOver()" onmouseout="mOut()" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(){
document.getElementById("mouse").innerHTML="Thank You"
}
function mOut(){
document.getElementById("mouse").innerHTML="Mouse Over Me"
}
</script>

2.这个中法比较简单,而且可以少些不少代码:

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>

利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别的更多相关文章

  1. DOM节点中获取文本易混淆的属性

    DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...

  2. DOM节点的增删改查以及class属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  4. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

  5. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  6. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点

    Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...

  8. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  9. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

随机推荐

  1. linux文件目录颜色及特殊权限对应的颜色

    白色:表示普通文件蓝色:表示目录绿色:表示可执行文件红色:表示压缩文件浅蓝色:链接文件红色闪烁:表示链接的文件有问题黄色:表示设备文件灰色:表示其它文件 各种背景颜色的显示和文件的权限有关红色背景:特 ...

  2. js文字转语音(speechSynthesis)

    环境: windows 官网网址: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis 基础使用: var msg = n ...

  3. 【系统安全性】四、认证Authentication

    四.认证Authentication 1.为什么要认证 对请求.数据进行认证,判断伪造的数据 HTTP请求很脆弱,抓包软件很强大,容易伪造身份,非法获取数据 2.摘要认证 对象:客户端参数.服务端响应 ...

  4. 二叉树总结及部分Lintcode题目分析 1

    1. 遍历问题 Preorder / Inorder / Postorder preorder: root left right inorder: left root right postorder: ...

  5. flex 布局,flex-grow 宽度未等比放大问题解决办法

    本文转载自:https://blog.csdn.net/sinat_41695090/article/details/79215893 先粘贴上一段代码,flex总体布局 <body> & ...

  6. Netty 相关目录

    Netty 相关目录 Netty 源码学习--客户端流程分析 Netty 源码学习--服务端流程分析 Netty 源码分析--ChannelPipeline Netty 源码学习--EventLoop ...

  7. 2.执行计划(explain)分析

    1.使用场景 获取执行计划命令:在select 命令前加上explain 或 desc explain select 或 desc select 1.语句执行之前 :防患于未然 2.出现慢语句时 :亡 ...

  8. DQL 数据查询语言 show

    2.show show databases; 查看所有的库 show tables; 查看当前库的所有的表 show tables from database; 查看指定的库下的所有表 show pr ...

  9. Apache配置 PHP 支持

    1,在服务区安装PHP 解压 php 到纯英文路径目 2,添加 PHP处理模块 LoadModule php7_module C:/ProgramData/php/php7apache2_4.dl 3 ...

  10. hdu6325 /// 上凸包

    题目大意: 给定n 为n个点 给定n个点的坐标 两个点(xi,yi) (xj,yj)之间的花费是 xi*yj-yi*xj (可能为负数) 要求从点1经过若干个点到点n最小花费的路径 且路径要按x轴方向 ...