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

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. springboot设置静态资源缓存一年

    由于本人所在项目组,所用的项目是前后端分离的,前端是React 的SPA,每次打包都会新版本的静态文件. 然而,在有些时候,这些静态资源是不变的,故可以将资源缓存至用户本地,提升性能. 写法如下,需要 ...

  2. flink详细介绍

    Flink是什么 Flink是一个分布式计算引擎 MapReduce Spark Storm 同时支持流计算和批处理 和Spark不同, Flink是使用流的思想做批, Spark是采用做批的思想做流 ...

  3. mysql|tomcat|nginx|redis在docker中的部署

    MySQL部署 拉取MySQL镜像 docker pull mysql 查看镜像 创建MySQL容器 docker run -di --name pinyougou_mysql -p 33306:33 ...

  4. TeleportArea可瞬移的目标位置

    TeleportArea.png 1.可以自定义mesh ,想要什么区域就可以设置什么区域的mesh网格.2.Collider 组件必须有,否则无法进行位置移动,它用来检测激光笔是否打到该区域.3.M ...

  5. STM32嵌入式开发学习笔记(三):使用按键控制小灯

    按键和小灯一样,也是通过GPIO外设与主板连接,也是通过GPIO_InitStruct类型结构体控制其工作. 查阅技术手册,按钮连接GPIOA控制下的管脚0. 但与之不同的是,按键是一种输入设备,输入 ...

  6. readUTF()和writeUTF()

    readUTF()和writeUTF() 这是dataOutputStream 的方法~~使用utf-8编码 其实就是从unicode变过来的,utf8编码把unicode的ASCII编码变成1个字节 ...

  7. CSS:CSS 媒体类型

    ylbtech-CSS:CSS 媒体类型 1.返回顶部 1. CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体类型 ...

  8. 使用ansible远程管理集群

    使用ansible远程执行命令 1.ansible简介 ansible的官方定义:"Ansible is Simple IT Automation"--简单的自动化IT工具.这个工 ...

  9. RabbitMQ使用(二)

    1.消息确认消费 1. 生产者端发消息时,加参数 properties=pika.BasicProperties( delivery_mode=2, # make message persistent ...

  10. 关于py中lxml模块的cssselect的小问题

    今天在使用lxml进行解析页面的时候遇到了不能解析空格的问题,就是类似于: <div class="aa bb"></div> 使用cssselect('. ...